vue动态路由

官网：https://router.vuejs.org/zh/guide/essentials/navigation.html
一、安装路由
npm install vue-router --save-dev
在src目录下创建router目录
使用 vuecli3创建项目选择路由会自动创建route目录

在main.js引入router

二、配置路由

1、 hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器（默认是hash模式）。

2、 history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

3、abstract:支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器 的 API，路由会自动强制进入这个模式。

三、路由跳转
标签跳转：about

当用户点击v-link指令元素时，我们可以大致猜想一下这中间发生了什么事情：
vue-router首先会去查找v-link指令的路由映射
然后根据路由映射找到匹配的组件
最后将组件渲染到标签

编程式跳转：
this.$router.push("/about")this.$router.push({
path:"/about",
query:{age:1,name:“张三”}
})
this.$router.push(name:"About",//组件名称query:age:1,name:"张三")this.$router.push({
name:“About”, //组件名称
params:{age:1,name:“张三”}
})
query参数会带到浏览器url后面显示出来使用params就不会

router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
router.go(1) ； // 在浏览器记录中前进一步，等同于 history.forward( )
router.go(-1)； // 后退一步记录，等同于 history.back( )
router.go(3)； // 前进 3 步记录
this.$router.back() //返回

四、keep-alive 路由缓存
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
一般结合路由和动态组件一起使用，用于缓存组件；
提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated
全部缓存：



指定路由缓存：



多个路由只想缓存部分路由：
在routre目录下的index.js文件
{
path:’/Distribution’,
name:‘Distribution’,
component: Distribution,
meta: {keepAlive: true // 缓存}
}
页面

//当前进入的路由 meta里面 keepAlive为true时走这里

五、vue router的钩子函数
https://www.cnblogs.com/zhilu/p/13782120.html

六、动态添加路由
const routerArr=[
{
path: ‘/about’,
name: ‘About’,
meta: {
keepAlive: true // 路由缓存
},
component: ()=>import(’…/views/About.vue’),
children:[
{
path: ‘/about/children’,
name: ‘Children’,
component: ()=>import("@/views/children"),
}
]
}
]
router.addRoutes(routerArr)