初学Vue（全家桶）-第17天（vue-router）：编程式路由导航、缓存路由组件、路由守卫、路由重定向与起别名

初学Vue

1、编程式路由导航

之前所学的路由跳转都是通过router-link标签实现的，该标签实现有局限性，跳转并不灵活，并且在被浏览器解析后会自动变为< a> 标签。而借助编程式路由导航就可以实现路由组件的灵活跳转。

• 编程式路由导航的用途
  不借助< router-link>标签实现路由跳转，让路由跳转更加灵活。

• 主要代码

<button @click="jump"></button>

-------------------
// 第一种跳转方式,push写入跳转
jump(){
	this.$router.push({
		name:'组件名',
		params:{
			id:xxx,
			title:xxx,
		}
	})
}

// 第二种方式：replace写入跳转
jump(){
	this.$router.replace({
		name:'组件名',
		params:{
			id:xxx,
			title:xxx,	
		}
	})
}

这里的name:"组件名"是在route.js路由文件中的name属性所指定的。

2、缓存路由组件

切换组件时，被切换掉的组件会被销毁掉，而如果此时被销毁的组件含有输入框，并且输入框中有值时，那么值也一样会被销毁，这并不是我们想要得到的结果，因此，通过缓存路由组件，可以保存指定的组件。，让其保持挂载，不被销毁。

实现：使用keep-alive标签包裹router-view标签

<!--缓存一个组件的情况-->
<keep-alive include="指定路由组件name">
    <router-view></router-view>
</keep-alive>

<!--缓存多个组件时，include的取值为数组-->
<keep-alive :include="['News','Message']">
    <router-view></router-view>
</keep-alive>

不写include属性时，默认其下所有路由组件切换后不销毁。
include的取值是组件名，不是路由器route.js中的name，而是在定义组件时的name
如图：

3、vue-router独有的两个生命周期钩子

功能：用于捕获路由组件的激活状态
具体名字：
activated：路由组件被激活时触发。
deactivated：路由组件失活时触发。

4、路由守卫

4.1 概述

路由守卫，就相当于坐飞机前要进行安检的安检门，你只有符合要求，安检门才让你通过，你才可以上飞机。也就是说，这个路由守卫是为了保护路由的安全，对路由进行权限控制，符合要求时，才显示指定路由。

4.2 全局路由守卫

4.2.1 全局前置

• 实现
  src/router/route.js

const router = new VueRouter({
	routes:[...]
})

// 全局前置路由守卫：初始化的时候会被调用，每次路由组件切换之前自动调用
router.beforeEach((to,from,next)=>{
	// 假设cookie中有数据，key=name，value="小明"
	// 切换路由之前判断是否符合要求
	// 如果是要切换到Component1或者Component2则进行进一步判断
	if(to.name==='Component1' || to.name==='Component2'){
		// 如果cookie中存的是name="小明",则给组件放行
		if(localStorage.getItem('name')==='小明'){
			// 符合要求则放行
			next()
		}else{
			alert("名字不对!无权限查看!!")	
		}
	// 其他组件则可以通行
	}else{
		next()	
	}
})

（1）to参数代表一个对象，该对象中包含目标路由的信息，例如path，fullPath，params，query等
（2）from参数代表一个对象，该对象包含当前路由的信息，例如path，fullPath，params，query等
（3） next参数用于给组件放行，通常在这里会加上一些判断

此外，如果有多个组件要进行权限判断，那么可以将if(to.name==='Component1' || to.name==='Component2'){}进一步简化，前提是在路由的meta配置项（路由元信息，在这里自定义一些配置）中自定义一个配置，专门用于处理是否要进行权限判断，如下：

src/router/route.js

const router = new VueRouter({
	routes:[
		{
			...
			meta:{ // 给需要进行权限判断的路由添加
				isAuth:false // isAuth是自定义的配置，这里用来指定是否授权的意思
			}
		},
		...
	]
})

router.beforeEach((to,from,next)=>{
	// 假设cookie中有数据，key=name，value="小明"
	// 切换路由之前判断是否符合要求
	// 如果是要切换到Component1或者Component2则进行进一步判断
	if(to.meta.isAuth){ // 判断是否需要鉴权
		// 如果cookie中存的是name="小明",则给组件放行
		if(localStorage.getItem('name')==='小明'){
			// 符合要求则放行
			next()
		}else{
			alert("名字不对!无权限查看!!")	
		}
	// 其他组件则可以通行
	}else{
		next()	
	}
})

4.2.2 全局后置

const router = new VueRouter({
	routes:[
		{
			...
			meta:{ // 给需要进行权限判断的路由添加
				isAuth:false // isAuth是自定义的配置，这里用来指定是否授权的意思
				title:'xxx'
			}
		},
		...
	]
})

// 全局后置守卫---初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	if(to.meta.title){
		document.title = to.meta.title // 修改网页的title	
	}else{
		document.title='xxx'
	}
})

和全局前置不同的是，后置没有next参数，因为这是在路由切换之后执行的函数，所以不需要进行手动放行的操作

4.3 独享路由守卫

见名思意，独享路由守卫就是某一个路由所独享的路由守卫，直接写在路由中，如下：

const router = new VueRouter({
	routes:[
		{
			...
			meta:{ // 给需要进行权限判断的路由添加
				isAuth:false // isAuth是自定义的配置，这里用来指定是否授权的意思
				title:'xxx'
			}
		},
		// 独享路由守卫
		beforeEnter((to,form,next)=>{
			if(to.meta.isAuth){
				if(localStorage.getItem('name')==='小明'){
					next() // 符合要求则权限通过
				}else{
					alert('名字不对，无权限查看!')
				}
			}else{
				next()
			}
		})
		...
	]
})

注意，独享路由守卫只有前置的，也就是beforeEnter，并不存在什么afterEnter

4.4 组件内路由守卫

见名思意，直接放在组件中的路由守卫。如下：

// 进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){
	...
},
// 离开守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to.from,next){
	...
}

5、路由重定向与起别名

• 重定向：通过在route配置中使用redirect实现重定向。

【重定向redirect】的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b。

简单说就是设置了一个路由，它有自己的路径，但重定向跳转至另一个路由。

例1：下面例子是从 /home 重定向到 /，也就是说在浏览器导航栏中输入/home的时候，会自动跳转到/所在的页面

const routes = [{path:'/home',redirect:'/'}]

例2：重定向的目标也可以是一个命名的路由

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

例3：redirect中还可以是一个方法，以此动态返回重定向目标

const routes = [
	{
	    // /search/screens -> /search?q=screens
	    path: '/search/:searchText',
	    redirect: to => {
	      // 方法接收目标路由作为参数
	      // return 重定向的字符串路径/路径对象
	      return { path: '/search', query: { q: to.params.searchText } }
	    },
	},
	{
		path:'/search',
		// ...
	}
]

• 起别名alias

【起别名alias】的意思是，/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

简单来说就是为某个路由增加一个新名字—新路径，使得不管应用到哪条路径最终都显示同一个路由的页面内容。

例1：将 / 别名为 /home，当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

例2：通过起别名，可以自由地将 UI 结构映射到一个任意的 URL，而不受配置的嵌套结构的限制。使别名以 / 开头，以使嵌套路径中的路径成为绝对路径。甚至可以将两者结合起来，用一个数组提供多个别名

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // 为这 3 个 URL 匹配 UserList组件并展示
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]