Vue路由介绍

路由

1、理解：一个路由(router)就是一组映射关系(key - value)，多个路由需要路由器(router)进行管理。
2、前端路由：key是路径，value是组件

一、基本使用

1、安装vue-router，命令：npm i vue-router
2、应用插件：Vue.use(VueRouter)
3、编写router配置项：

// 引入VueRouter
import VueRouter from 'vue-router';
// 引入路由组件
import About from '../components/About';
import Home from '../components/Home';

// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path: '/about',
			component: About
		},
		{
			path: '/home',
			component: Home
		}
	]
})

//暴露router
export default router;

4、实现切换(active-class 可配置高亮样式)

<router-link active-class="active" to="/about">About</router-link>

5、指定展示位置

<router-view></router-view>

二、注意点

1、路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2、通过切换，“隐藏”了的路由组件，默认是被销毁掉，需要的时候再去挂载。
3、每个组件都有自己的$route属性，里面存储着自己的路由信息。
4、整个应用只有一个$router，可以通过组件的$router属性获取到。

三、多级路由

1、配置路由规则，使用children配置项：

routes:[
	{
		path: '/about',
		component: About
	},
	{
		path: '/home',
		component: Home,
		children:[ //通过children配置子级路由
			{
				path: 'news', // 此处一定不要写：/news 
				component: News
			},
			{
				path: 'message', // 此处一定不要写：/message 
				component: Message
			}
		]
	}
]

2、跳转（需要写完整路径）：

<router-link to="/home/news">News</router-link>

四、路由的query参数

1、传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
	:to="{
		path: '/home/mesage/detail',
		query: {
			id: 666,
			title: '你好'
		}
	}"
>跳转</router-link>

2、接收参数

$route.query.id
$route.query.title

五、命名路由

1、作用：可以简化路由的跳转
2、如何使用
（1）给路由命名

{
	path: '/demo',
	component: Demo,
	children:[
		{
			path: 'test',
			component: Test,
			children: [
				name: 'hello',
				path: 'welcome',
				component: Hello
			]
		}
	]
}

（2）简化跳转

<!-- 简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name: 'hello' }">跳转</router-link>

<!-- 简化写法配合传递参数 -->
<router-link 
	:to="{
		name: 'hello',
		query: {
			id: 666,
			title: ' 你好'
		}
	}"
>跳转</router-link>

六、路由的params参数

1、配置路由，声明接收params参数

{
	path: '/home',
	component: Home,
	children: [
		{
			path: 'news',
			component: News
		},
		{
			component: Message,
			children: [
				{
					name: 'detail',
					path: 'detail/:id/:title', //使用占位符声明接收params参数
					component: Detail
				}
			]
		}
	]
}

2、传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</rouer-link>

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name: 'detail',
		params: {
			id: 666,
			title: '你好'
		}
	}"
>跳转</router-link>

注：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3、接收参数

$route.params.id
$route.params.title

七、路由的props配置

作用：让路由组件更方便的收到参数

{
	name: 'detail',
	path: 'detail/:id',
	component: Detail,
	// 第一种写法：props值为对象，该对象中所有的key-value的组合最终会通过props传给Detail组件
	// props: {a: 900 }

	// 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props: true

	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id: route.query.id,
			title: route.query.title
		}
	}
}

八、<router-link>的replace属性

1、作用：控制器由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时默认为push
3、如何开启replace模式：<router-link replace ...>News</router-link>

九、编程式路由导航

1、作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2、具体编码：

// $router的两个API
this.$router.push({
	name: 'detail',
	params: {
		id: xxx,
		title: xxx
	}
})

this.$router.replace({
	name: 'detail',
	params: {
		id: xxx,
		title: xxx
	}
})

十、缓存路由组件

1、作用：让不展示的路由组件保持挂载，不被销毁。
2、具体编码：

<keep-alive include="News">
	<router-view></router-view>
</keep-alive>

十一、两个新的生命周期钩子

1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2、具体名字：

• activated 路由组件被激活时触发。
• deactivated路由组件失活时触发。

十二、路由守卫

1、作用：对路由进行权限控制
2、分类：全局守卫、独享守卫、组件内守卫
3、全局守卫：

// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next)=>{
	console.log('beforeEach', to, from);
	if(to.meta.isPower){
		if(localStorage.getItem('school') === 'test'){
			next();
		}else {
			alert('无权限查看');
		}
	}else {
		next() // 继续路由跳转
	}
})

// 全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to, from) =>{
	console.log('afterEach', to, from);
	if(to.meta.title){
		document.title = to.meta.title; // 修改网页的title
	}else {
		document.title = 'vue_test';
	}
})

4、独享守卫：

beforeEnter(to, from, next){
	console.log('beforeEnter', to, from);
	if(to.meta.isPower){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'test'){
			next();
		}else {
			alert('无权限查看');
		}
	}else {
		next();
	}
}

5、组件内守卫

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

十三、路由器的两种工作模式

1、对于一个url来说，什么是hash值？ ----- #及其后面的内容就是hash值
2、hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3、hash模式：

• 地址中永远带着#号，不美观
• 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
• 兼容性较好

4、history 模式：

• 地址干净，美观
• 兼容性和hash模式相比略差
• 应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题