vue-router 官方文档学习

安装

npm install vue-router

简单使用

# 在 main.js 文件中

import Vue froom 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import User from '@/views/User'
import Login from '@/views/Login'

let vueRouter = new VueRouter({
   
	routes: [
		{
   
			path: "/"
			component: Login
		},
		{
   
			path: "/user",
			component: User
		}
	]
});


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

# 说明：
# （1）通过 Vue.use(VueRouter) 之后，会通过 VueRouter.install(Vue) 方法为每个 vue 实例混入两个生命周期钩子方法：beforeCreate, beforeDestroy。
# （2）且在 beforeCreate 中，会将 vue 实例记录到 router.apps 数组中。也会将 router，route 挂在到 vue 实例上。
# （3）所以在 vue 实例中，可以使用 this.$router 来操作路由，访问 push, repace等方法。 通过 this.$route 来获取 query, params 等路由传递数据。

动态路由匹配

动态路径

(1) 一个路径参数使用冒号 : 标记，则会认为这段路径是动态参数。

比如 /user/:userId 的 :userId 就是动态路径。

(2) 当匹配到了一个路由时，参数值会被设置到 this.$route.params, 可以在每个组件内使用。

# 情形1:  直接在浏览器中输入url， 比如: http://localhost:8080/user/123456。
# 情形2:  <router-link :to="/user/123456">查看用户详情</router-link>

当点击了 “查看用户详情” 的路由导航时，会被匹配 /user/:userId 的路径。此时会将 {
    userId: 123456 } 记录到 this.$route.params 中。

(3) 当匹配到一个路由时，且路由跳转时携带有 params 参数，则会将动态路径进行填充。

# 情形1: <router-link :to='{ name: "userInfo", params: { userId: 123456 } }' />
# 情形2: this.$router.push( {
    name: "userInfo", params: {
    userId: 123456 } } )

当发生路由跳转时， "/user/:userId" 会被替换成 "/user/123456" 显示到浏览器的地址栏上。

路由参数的变化

1、当新的路径发生跳转时，会与之前的 route 进行比较，尽可能的复用已经存在的组件。比较极端的情况就是：匹配到的路径是同一个，但是动态路径参数不一样，这个时候会没有一个组件会被销毁或者创建。既然是复用已创建的组件，那么就不会有 beforeCreate, created, mount 的生命周期函数被调用。( 组件由于复用，所以不会调用与vue创建过程相关的生命周期方法。)

2、但是每一次路由跳转过程中，都会创建一个新的 route 对象。也就是说 this.$route 会响应式变化，所以可以通过监听的方式来感知跳转到了新页面。

# userInfo.vue 页面
export default {
   
	name: "userInfo",
	data(){
   
		return {
   }
	},
	watch: {
   
		$route( to, from ){
   
			//对路由变化作出响应。
		}
	}
}

捕获全部路由

(1) 捕获全部路由

​ 通常项目中，会有一个捕获所有路由的配置，用于对不存在或者无权限的 url 进行处理。

# 在 routes 配置内容的任意位置增加一个如下配置即可。
# 带 * 的 route config，会被自动放到 pathList 的末尾。甚至可以配置多个带 * 的 route config。
import NotFound from "@/views/not-found"
new VueRouter({
   
  routes: [
    {
   
      #用 * 号表示后面的内容为任意长度。
      path: "*",
      component: NotFound
    }
  ]
})

（2）捕获部分路由

{
  #用 * 号表示后面的内容为任意长度。则匹配 /user-xxxxx 路径。
  path: '/user-*'
}

匹配模式

vue-router 使用 path-to-regexp.js 这个文件作为路径匹配引擎。

(1) 将 routes 中的路径转为完整路径之后，会计算出对应的正则匹配表达式。

比如：{
   
	routes: [
		{
   
			path: "/user",
			component: xxxxx,
			children: [{
   
				path: ":userId",
				component: xxxx
			}]
		}
	]
}

此时 routes 会转化为两个 record 对象。
{
   
	path: "/user",
	componets: {
    default: component },
	regex: "用于匹配/user路径的正则表达式"
	....
},{
     
	path: "/user/:userId",
	components: {
    default: component },
	regex: "用于匹配 /user/xxxx的正则表达式"
}

如果跳转的 url 为 http://localhost:8080/user/123456 的时候， 就会被 regex 所匹配。从而确定跳转路由以及对应要创建的 vue 组件。

（2）用于提取 url 上与动态路径对应的参数，放置到 params 中。

如果访问 'http://localhost:8080/user/123456'， 则 "user/123456".match( regex ) 的时候，就会将 "userId" 与 '123456' 对应上。将这对 key-value 放到 this.$route.params 中。

# console.log( this.$route.params )  // { userId: 123456 }

优先级

1、Vue-router 中，对动态路由进行匹配的时候，是遍历数据 pathList 的方式，所以配置在前面的优先匹配即退出。

2、但是对于 * 号，会收集了所有的 route config 之后，会把所有path为 * 全部移到 pathList 的队尾。

嵌套路由

vue-router 支持多级路由嵌套。代码形式如下:

# router 的使用
import User from "@/views/user"
new VueRouter({
   
	routes: [
	#routes 中的元素，会被渲染到下面代码 app.vue 的 <router-view> 中。 表示是一级路由。
		{
   
			path: "/",
			redirect: "/user"
		},
		{
   
			path: "/user",
			component: User,
			#在 route config 中的路由，被称为子路由。会被渲染到父 route config 对应的 component 的 <router-view></router-view>中。
			children: [{
   
				path: ":userId",
				component: UserInfo
			}]
		}
	]
})

# app.vue 中
<template>
	<div>
  	<view-link :to="/user/123456" />
		<view-router></view-router>
	</div>
</template>
export default {
   
	name: "app"
}


# user.vue 中
<template>
	<div>
		12345678
		<view-router></view-router>
		87654321
	</div>
</template>
export default {
   
  name: "user"
}


# userInfo.vue 中
<template>
	<div>
			{
   {
   this.$route.params.userId}}
	</div>
</template>
export default {
   
  name: "userInfo"
}

关于 “嵌套路由” 的配置方式

# 子路由也是支持绝对路径形式配置的。
const router = new VueRouter({
   
	routes: [
		{
   
		
			path: "/user,
			component: User,
			children: [
			  #形式1: 绝对路由形式。但一般会根据上级的 route config 的 path，前缀路径会保持一样。
				{
   
					#这种形式不管上级的 route config 配置路径是如何，都不受影响。
					path: "/user/name",
					component: Name
				},
				#形式2: 相对路径形式
				{
   
					#这种形式会根据上级的 route config 配置路径进行拼接。
					path: ":userId",
					component: UserInfo
				}
				#形式3: 绝对路径形式。比较怪异的就是，跟上级的 route config 的 path，前缀路径不一致。
				# 之所以写上这种路径，主要还是考虑源码里面会如何处理。
				{
   
					path: "/user1/name1",
					component: Name2
				}
			]
		}
	]
});

编程式导航

1、this.$router.push( location, onComplete, onAbort )

# 假设历史记录栈的数组为: const record=["/", "/user", "/info"]; 且当前页面是指向的 "/user", 如果使用 this.$router.push("/home"), 那么 "/user" 之前的历史记录会被清除，再新增一个 "/home",此时 record 会变为 ["/", "/user", "/home"]。
# 当然，一般而言，当前页面是指向栈定元素的。

几种使用方式

# 其实也就是 RawLocation 的几种形式
（1）RawLocation 为字符串。
		this.$router.push("/home")

（2）RawLocation为对象，将 path 放到对象中。
		this.$router.push({
    path: 'home' })

（3）RawLocation为对象，且使用命名路由的方式。
		this.$router.push( {
    name: 'user', params: {
   userId: 123} } )
		
（4）带参数查询方式 /user?id=123
		this.$router.push( {
    path: "/user", query: {