11.初步使用vue-router

  • 时间:
  • 来源:互联网

vue-router:

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

https://router.vuejs.org/zh/guide/

起步:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>start</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<button v-on:click='showRouter'>$router 访问路由器</button>
		<button v-on:click='showRoute'>$route 访问当前路由</button>
		<div>
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定链接. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			<router-link to="/foo">Go to Foo</router-link>
			<router-link to="/bar">Go to Bar</router-link>
		</div>
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<router-view>
			
		</router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

		// 1. 定义 (路由) 组件。
		// 可以从其他文件 import 进来
		const Foo = { template: '<div>foo</div>' }
		const Bar = { template: '<div>bar</div>' }

		// 2. 定义路由
		// 每个路由应该映射一个组件。 其中"component" 可以是
		// 通过 Vue.extend() 创建的组件构造器,
		// 或者,只是一个组件配置对象。
		// 我们晚点再讨论嵌套路由。
		const routes = [
			{ path: '/foo', component: Foo },
			{ path: '/bar', component: Bar }
		]

		// 3. 创建 router 实例,然后传 `routes` 配置
		// 你还可以传别的配置参数, 不过先这么简单着吧。
		const router = new VueRouter({
			routes // (缩写) 相当于 routes: routes
		})

		// 4. 创建和挂载根实例。
		// 记得要通过 router 配置参数注入路由,
		// 从而让整个应用都有路由功能
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'hello router'
				}
			},
			methods: {
				showRouter(){
					console.log('函数 showRouter')
					console.log(this.$router);
				},
				showRoute(){
					console.log('函数 showRoute')
					console.log(this.$route);
				}
			}
		}).$mount('#app');

		// 现在,应用已经启动了!
	</script>
</body>
</html>

动态路由匹配:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.dynamic-router</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<div>
			<router-link to="/user/foo">Go to Foo</router-link>
			<router-link to="/user/bar">Go to Bar</router-link>
		</div>
		<router-view>
			
		</router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;

		const router = new VueRouter({
				routes: [
						// 动态路径参数 以冒号开头
						{
							path: '/user/:id',
							component: {
								template: '<div>User - id: {{ $route.params.id }}</div>',
							}
						}
				],
		});

		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'hello dynamic-router'
				}
			},
			methods: {
				showRouter(){
					console.log('函数 showRouter')
					console.log(this.$router);
				},
				showRoute(){
					console.log('函数 showRoute')
					console.log(this.$route);
				}
			}
		}).$mount('#app');
	</script>
</body>
</html>

嵌套路由:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.nested-router.html</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<div>
			<router-link to="/user/door">Go to door</router-link>
		</div>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const User = {
			template: `
			<div class="user">
				<h2>User {{ $route.params.id }}</h2>
				<router-link to="/user/door/profile">profile</router-link>
				<router-link to="/user/door/posts">posts</router-link>
				<router-view></router-view>
			</div>
			`
		}
		const router = new VueRouter({
			routes: [
				{
					path: '/user/:id', component: User,
					children: [
						{
							// 当 /user/:id/profile 匹配成功,
							// UserProfile 会被渲染在 User 的 <router-view> 中
							path: 'profile',
							component: {
								template: `<p>我是嵌套的路由组件 profile !</p>`
							}
						},
						{
							// 当 /user/:id/posts 匹配成功
							// UserPosts 会被渲染在 User 的 <router-view> 中
							path: 'posts',
							component: {
								template: `<p>我是嵌套的路由组件 posts !</p>`
							}
						}
					]
				}
			]
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'hello nested-router'
				}
			},
			methods: {
				showRouter(){
					console.log('函数 showRouter')
					console.log(this.$router);
				},
				showRoute(){
					console.log('函数 showRoute')
					console.log(this.$route);
				}
			}
		}).$mount('#app');
	</script>
</body>
</html>

本文链接http://element-ui.cn/news/show-730643.aspx