1.# 锚链接,哈希地址,#后面是hash值
加 # 不会向服务器发送请求
点击 第一个a标签 页面会跳到 id=bi的 div,浏览器地址会多个#b1
2.路由工作方式
2.1.手动模拟简单路由
监听hash地址变化&获取hash值
3.路由基本使用
3.2 配置main.js
3.3路由小注意点
在执行 模块化导入 的时候,如果给定的是文件夹,则默认导入这个文件下,名字叫做 index.js 的文件
3.4 对应关系使用 路由
1.router-view 占位符,切换组件
2. 路由模块
3.5使用 router-link 替换 a 标签
4 重定向
5.嵌套路由,套娃
5.1.子组件
5. 2.路由index属性:(children)
注意:子路由前面不能加 /
用 重定向 实现 进入about组件 默认显示,子组件table1
方式一
方式二默认子路由
如果children 数组中,某个路由规则的的 path 值为 空字符串,则这条路由规则,叫做 默认子路由
6.动态路由匹配
/ 和?
6.1获取动态路由的值 this.$route 路由的参数对象
this.$route.params.属性
this 可以省略
6.2 简化传参 开启 props 传参
7.声明式导航&编程式导航
7.1.简介
7.2 Vue 中的编程式导航API ($router)
1.this.$router.push(' hash 地址')
会增加一条是历史记录
可以 前进 后退
2. this.$router.replace(' hash 地址')
会替换历史记录
箭头不能点
3.this.$router.go(数值 n)
3.1 this.$router.go(数值 n) 简化用法
8 导航守卫
8.1.全局前置守卫
1.守卫方法的三个形参
注意 next()方法
2.next()函数的3中调用方式
