Vue中的路由 | 守卫问题

什么是路由

路由就是一个对应关系

SPA（但页面应用程序）与前端路由

Hash地址和组件之间的对应关系

前端路由的工作方式

1. 用户点击路由链接
2. 导致了url地址栏中hash的值发生变化
3. 前端路由监听到了hash地址的变化
4. 前端路由把对应组件渲染到浏览器当中

手动监听

//动态组件
<component :is='comName'></component>
//------------------------------------------
//监听hash改变事件
window.onhashchange=()=>{
	console.log('监听到了hash地址的变化',location.hash)
	switch (location.hash){
		case '#/home':
			this.comName-''
			break 
	}
}

vue-router

vue-router是vuejs官方给出的一套路由管理方案，它只能结合vue项目进行使用，能够轻松管理SPA项目中组件的切换

官方文档：https://router.vuejs.org/zh

安装

npm i vue-router -S

创建路由模块

在src源目录下，新建router/index.js路由模块，并初始化代码

import Vue from 'vue'
import VueRouter from 'vue-router'
//调用Vue.use()函数，把VueRouter安装为Vue的插件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
Vue.use(VueRouter)
//创建路由和实例对象
const router = new VueRouter({
	//一个数组，定义hash地址与组件之间的对应关系
	routes:[
		{path:'/',redirect:'/home'}
		{path:'/home',component:Home},
		{path:'/movie',component:Movie},
		{path:'/about',component:About}
	]
})
//向外共享路由的实例对象
export default router

//main.js中添加
//import部分添加
import router from @/router/index.js
//new Vue实例中
router:router

//vue组件中
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>
//只要在项目中配置了vue-router，就可以使用router-view这个组件了
<router-view><router-view> 

路由重定向

指的是用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面，通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
{path:‘/’,redirect:‘/home’}

嵌套路由

route:[
	{
		path:'/about',
		component:About,
		redirect:'/about/tab1'
		children:[
			{path:'tab1',component:Tab1},
			{path:'tab2',component:Tab2}
		]
	}
]

动态路由

{page:'/movie/:id',component:Movie}
//上面语句将以下三个路由合并成一个
{page:'/movie/1',component:Movie}
{page:'/movie/2',component:Movie}
{page:'/movie/3',component:Movie}

vue-router中的编程式导航API

this.$router.push(‘hash地址’)
跳转到指定的hash地址，并增加一条历史记录
this.$router.replace(‘hash地址’)
跳转到指定的hash地址，并替换掉当前的历史记录
this.$router.go(数值n)
在历史中前进n层
$router.back()
在历史纪录中，后退到上一个页面
$router.forward()
在历史纪录中，前进到下一个页面

导航守卫

控制路由的访问权限

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制。

const router = new VueRouter({...})
router.beforeEach(function(to,from,next){
	//to是将要访问的路由的信息对象
	//from是将要离开的路由的信息对象
	//next是一个函数，调用next()表示放行，允许这次路由导航
})

next函数的3种调用方式

当前用户拥有后台主页的访问权限，直接放行next()
当前用户没有后台主页的访问权限，强制其跳转到登陆页面，next(‘/login’)
当前用户没有后台主页的访问权限，不允许跳转到后台主页，next(false)

分析

1. 要拿到用户将要访问的hash地址
2. 判断hash地址是否等于/main
3. 如果等于/main，证明需要登录之后，才能访问成功
4. 如果不等于/main，则不需要登录，直接放行，调用next()
5. 如果访问的地址是/main。则需要读取localStorage中的token值
6. 如果有token则放行，如果没有，则强制跳转到login等于页面

router.beforeEach(function(to,from,next){
	//to是将要访问的路由的信息对象
	//from是将要离开的路由的信息对象
	//next是一个函数，调用next()表示放行，允许这次路由导航
	if(to.path==='/main'){
		const token=localStorage.getItem('token')
		if(token){
			next()
		}	
		else{
			next('/login')	
		}
	}else{
		next()
	}
})