不用router-link的路由导航、缓存路由组件
route只是一个规则
router是路由器有绝对的指挥权
使用this.$router
跳转路由
push / replace
在方法中,
methods: {
pushShow(message) {
// 方式一: **push跳转路由**, 需要制定个命名路由,以及参数对象
// 将跳转经过存入栈中
this.$router.push({
name: "myDetail",
params: {
id: message.id,
title: message.title,
},
});
},
replaceShow(message) {
// 方式二: **replace跳转路由**, 需要制定个命名路由,以及参数对象
// 替代上一个
this.$router.replace({
name: "myDetail",
params: {
id: message.id,
title: message.title,
},
});
},
},
手动跳转路由, 甚至可以延迟几秒在跳转, 不在局限于使用<router-link>转换为a链接跳转路由了
forward、back与go
forward、back分别对应 前进一步和后退一步
go前进或后退指定步数
1 前进一步
2 前进二步
-2 后退二步
-1 后退一步
methods: {
back() {
// this.$router.back();
this.$router.go(-2);
},
forward() {
// this.$router.forward();
this.$router.go(2);
},
},
总结
缓存路由组件
切换组件:将上一个组件销毁,挂载新的
这样上一个页面的操作可能遗失,那么缓存路由组件就是对应的解决方式
在路由页面展示的组件中,用<keep-alive>
标签包裹住router-view
可以避免路由页面销毁
加上include
属性, 指定缓存的组件, include="组件名"
总结:
路由仅有的生命周期钩子
-
看到的路由页面处于 激活 activated
-
被替代的路由页面处于 失活 deactivated