## VUE-ROUTER
vue2.0 => 3
vue3.0 => 4
安装命令:
npm install vue-router@3
yarn add vue-router@4
1.创建路由文件
2.在main.js页面进行引入并挂载
3.创建页面 详情见 router=>index.js
4.占位符:router-view 在哪里显示在哪里添加占位符 切记:占位符无需多个 按需显示即可
5.router-link 跳转标签
to:放置跳转到path
active-class:添加高亮
6.路由页面:
{
path:"/路径",
name:'当前页面名字',
如果使用name属性 router-link上to必须进行动态绑定 =>App.js
component:"当前路径的页面名字"
}
7.路由重定向
redirect:'默认页面路径'
8.多级路由
配置在对应的路由对象下
path路径没有:/
9.传参:
query:
列表
列表
接收:
js=>this.$route.query.xxx
template=>$route.query.xxx
params:
在router页面
{
path: "/my/:id/:name",
component: My,
},
在router-link上
我的
+++++++++++
在路由上添加name属性
在页面上
我的
接收:
js=>this.$route.params.xxx
template=>$route.params.xxx
name只能用于params传参 不能用于query传参
params对象传参 不会暴露所传信息
10.声明式导航:
router-link
编程式导航:
this.$router.push('具体跳转页面')
this.$router.back() 返回上一页
this.$router.forward() 前进
this.$router.go(n) 自定义
11.replace和push
添加在声明式导航上的
replace 无浏览历史记录
push 存在浏览历史记录
12.路由懒加载
按需加载 节约性能
在router页中component上
()=> import("路径")
13.组件缓存
keep-alive:讲需要保存的部分放到标签内
按需保存案例:
activated:组件调用时候激活
deactivated:组件销毁时侯激活
14.路由的模式
hash:
#
快
安全
即地址栏URL中的#符号,它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,不需要后台进行配置,因此改变hash不会重新加载页面。
history:
美观,干净
慢
history模式改变了路由地址,因为需要后台配置地址。
15.路由守卫
a.全局守卫:
全局前置路由守卫:router.beforeEach
全局后置路由守卫:router.afterEach
b.独享守卫
路由独享守卫:beforeEnter
c.组件守卫:
beforeRouteEnter:组件进入
beforeRouteLeave:组件离开