1.基础 2.路由重定向 3.路由嵌套 4.动态路由匹配 5.命名路由 6.编程式导航 7.守卫 8.路由懒加载 9.路由传参 10.keep-alive遇见vue-router
路由官网
router --> index 文件下
路由模式：
决定路由模式
注释了 那就是hash 存在 那就是history
1
2直接写这 路由懒加载
[tag属性]
默认渲染成a标签 ：
如下tag属性，指定渲染成什么标签
渲染成button按钮
[replace 属性]
路由跳转完后 不可以点击浏览器器上的返回键 返回不了上一层路由
this.$router.replace(this.path)
不可以返回上一层
[active-class 属性]
点击对应的 自动渲染出
可以在路由index中统一修改
:一进去就打开自己想进入的页面
[1] 定义
定义
声明式：通过标签,点击链接 然后跳转
编程式：通过jsAPI方法来跳转
[2] 常用的编程式导航API：
this.$router.push('地址')
this.$router.push('/home')
1.跳转到指定的地址,并增加一条历史记录
this.$router.replace('地址')
1.跳转到指定的地址,并替换当前的历史记录
this.$router.go(数值n)
1.this.$router.back() 后退页面
2.this.$router.forward() 前进页面
[3] 注意：
路由跳转的时候进行监听
[1] 全局前置守卫（guard）
要实现 路由跳转时 标题需要对应的改变 但是这样的话 每个文件都需要有改变，会很麻烦。如下图：
所以 我们可以监听路由跳转时 在路由跳转时 修改标题 =====>>全局前置守卫
to =====>> route类型：指的就是一个个路由
这样就可以实现页面跳转时 每个页面的标题的变化
这还不是最终结果
但是 嵌套路由 会undefined：
打印 to 发现：
所以 要写成这样才不会错：
登录小案例:
还可以更新
完成
登录案例:
[2] 全局后置钩子（hook）
[3] 路由独享守卫
[4]组件内的守卫
也可以分开写
URL：
协议: // 主机 : 端口 / 路径?查询（query）
scheme：//localhost：端口/path
$route.query.name
1、路由传参：
方法1:
父组件:
1
子组件:
接收传过来的数据
2
注意:这里的name是路由配置时,的name 不是路径
1、keep-alive 是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
2、router-view 也是一个组件，如果被包含在keep-alive里面，所有路径匹配到的视图组件都会被缓存。
比如，之前的页面中展开过一些内容，下次再次回到此页面，内容还是一样会是展开的。
1. vue-router 没有被 keep-alive 包含的时候 每进入一次 都会创建一次
2.不管页面切换多少次 只会创建一次
3.要实现 切换回之前的页面 页面里的内容还是一样
注意： 没有keep-alive 时 activated() 和 deactivated()是没有效果的
4.将某个组件排除在外
排除多个
