Vue-路由

认识路由:
路由指根据不同的URL地址展示不同的内容/页面.

备注: 路由就是一个超链接,用于链接当前页面中的资源. 类似于a标签的跳转到当前页面中指定位置.

前端路由及后端路由

实现步骤:
思路:
自己定义1组资源的映射规则,然后在视图管理区域中编写链接,链接资源.
第1步: 导入路由功能

	先导入vue-*.js文件,然后导入vue-router-*.js文件.
	<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>

第2步: 创建路由对象,设置路由匹配规则

	var 路由A=new VueRouter({
		//设置路由匹配规则: routes
		routes:[
			{path:"/连接A",component:"资源A"},
			{path:"/连接B",component:"资源B"},
			....
		]
	});

第3步: 将路由对象挂载到Vue对象

	必须挂载了路由对象后,才能在当前Vue对象管理的视图区域中使用路由.
	var vm=new Vue({
		省略...
		router: 路由A
	})

第4步: 使用路由

	a.创建路由链接[链接热点]
	<router-link to="资源">热点内容</router-link>
	b.设置路由资源的展示位置[路由出口]
	<router-view></router-view>

一级路由配置

二级路由

路由传参:

路由匹配规则: {path:"/路径A/:参名A/..." , component: 省略}
路由链接: <router-link to="/路径A/参A的值/...">热点</router-link>
路由资源内容: {{$route.params.参名A}}

编程式路由

编程式路由的其他方法

导航守卫:

导航守卫解析流程

全局守卫
全局前置导航守卫

全局后置导航守卫

路由独享守卫

组件内的守卫