1、路由(Router)的基本使用:1
2、Vue学习之--------多级路由的使用:2
3、路由的query、params参数、路由命名：3
文章目录
- 1、编程式路由导航
-
- 1.1 作用
- 1.2 具体编码
- 1.3 实际应用
- 1.4 测试结果
- 2、缓存路由组件
-
- 2.1 作用
- 2.2 具体编码
- 2.3 实际应用
- 2.4 测试结果
- 3、两个新的生命周期钩子
-
- 3.1. 作用
- 3.2. 具体名字
- 3.3 实际应用
- 3.4 测试结果
1、编程式路由导航
1.1 作用
不借助<router-link> 实现路由跳转，让路由跳转更加灵活
1.2 具体编码
//$router的两个API
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退
1.3 实际应用
1.4 测试结果
2、缓存路由组件
2.1 作用
让不展示的路由组件保持挂载，不被销毁。
2.2 具体编码
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
2.3 实际应用
2.4 测试结果
3、两个新的生命周期钩子
3.1. 作用
- 路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
3.2. 具体名字
activated路由组件被激活时触发。deactivated路由组件失活时触发。
3.3 实际应用
3.4 测试结果
