Vue Router的简单了解

Vue Router

Vue Router官方文档

传统Web项目开发往往采用超链接实现页面之间的切换和跳转。Vue开发的是单页面应用(Single Page Application,SPA)，不能使用超链接<a>标记实现切换和跳转。

因为项目打包后(npm run build)，就会产生dist文件夹，该文件夹中只有静态资源和一个index.html文件，所以使用<a>标记是不会生效的。

此时必须使用Vue Router进行管理。在Vue Router单页面应用中，路径之间的切换就是组件的切换。

路由模块的本质就是建立起URL和页面之间的映射关系。

安装与使用

npm install vue-router@3   //vue2的安装命令

如果不进行版本号的指定，直接执行npm install vue-router，控制台会报如下错误：

其实就是vue-router默认版本号为4，在vue2中不能安装高版本的vue-router

新建router的配置文件

在router/index.js中写router配置项

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

const router = new VueRouter({
	routes:[
		{
			path: '/about',
			component: About
		},
		{
			path: '/home',
			component: Home
		}
	]
})

//暴露router
export default router

在main.js中该路由配置文件

import Vue from 'vue'
import App from './App.vue'

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from "./router";

Vue.config.productionTip = false

Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

Home组件

<template>
<div>
  <h3>首页部分</h3>
</div>
</template>

About组件

<template>
<div>
  <h3>关于部分</h3>
</div>
</template>

在app.vue中进行路由的切换及相应页面的显示

<template>
  <div id="app">
    <p>
<!--      使用router-link实现路由切换-->
      <router-link to="/home">首页</router-link>
      <br>
      <router-link to="/about">关于</router-link>
    </p>
<!--    指定组件的呈现位置-->
    <router-view></router-view>
  </div>
</template>

通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载

每个组件都有自己的$route属性，里面存储着自己的路由信息

整个应用只有一个router，可以通过组件的$router属性获取到

路由中有3个基本概念：route、routes、router

• route是一条路由，使用{...}定义，内含两个基本属性:path和component,实现路由与组件的映射
• routes是一组路由，把每条路由组合起来，形成一个数组，类似于[route1,route2,...]
• router是路由管理器，用来管理路由

嵌套路由

配置路由规则，使用children配置项

routes:[
	{
		path: '/about',
		component: About
	},
	{
        path: '/home',
        component: Home,
        children:[
        	{
        		path: 'news',
        		component: News
        	},
        	{
        		path: 'message',
        		component: Message
        	}
        ]
    }
]

跳转（要写完整路径）

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

query参数

传递参数

//写法一
<router-link :to=`/home/message/detail?id=${m.id}&title=${m.title}`>跳转</router-link>

//写法二
<router-link
	:to="{
		path: '/home/message/detail',
		query:{
			id: m.id,
			title: m.title
		}
	}"
>
	跳转
</router-link>

接收参数: $route.query.id $route.query.title

name属性简化路由跳转

routes:[
	{
		name: 'guanyu', //通过name属性简化跳转的路由地址
		path: '/about',
		component: About
	},
	{
        path: '/home',
        component: Home,
        children:[
        	{
        		path: 'news',
        		component: News
        	},
        	{
        		name: 'xiaoxi',  //通过name属性简化跳转的路由地址
        		path: 'message',
        		component: Message
        	}
        ]
    }
]

简化后的跳转

<router-link :to="{name: 'xiaoxi'}">跳转</router-link>

<router-link
	:to="{
		name: 'xiaoxi',
		query:{
			id: m.id,
			title: m.title
		}
	}"
>
	跳转
</router-link>

params参数

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

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

传递参数

<router-link :to=`/home/message/detail/${m.id}/${m.title}`>跳转</router-link>

<router-link
	:to="{
		name: 'xiaoxi',  //这里只能写name配置项，path配置项会报错
		params:{
			id: m.id,
			title: m.title
		}
	}"
>
	跳转
</router-link>

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

接收参数：$route.params.id $route.params.title

路由的props配置

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

routes:[
	{
        name: 'xiangqing',
        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属性

作用：控制路由跳转时操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式：push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push

<router-link replace ...>News</router-link>

编程式路由导航

如果需要给按钮、图片等加上跳转页面的功能，就需要使用编程式路由导航

不借助实现路由跳转，让路由跳转更加灵活

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

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

this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

上面介绍的基本路由跳转，通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。但是有的时候需要将页面的内容暂时保留，这种时候就需要使用keep-alive让不展示的路由组件保持挂载，不被销毁。

<keep-alive include="News">   //include写的应该是缓存的组件名
	<router-view></router-view>
</keep-alive>

路由的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

activated：路由组件被激活时触发

deactivated：路由组件失活时触发

路由守卫

作用：对路由进行权限控制

全局路由守卫

//全局前置守卫，初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school')==='xxx'){ //权限控制的具体规则
			next() //放行
		}
	}else{
		next()
	}
})

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

独享路由守卫

某一个路由所独享的,只有beforeEnter，没有afterEnter

beforeEnter(to,from,next){

}

组件内路由守卫

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

history模式和hash模式

const router = new VueRouter({
    mode: 'history', //默认是hash模式
    routes:[...]
})

对于一个url来说，什么是hash值？——#及其后面的内容就是hash值

hash值不会包含在HTTP请求中，即hash值不会带给服务器

hash模式：

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

history模式：

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