Vue.js路由回退到指定页面

vue-router

1
2
3
4
5
6
7
8
//会记录跳转的路由,并存在 history 栈里(具有length属性),适合不同页面的切换
router.push();

//不会记录路由,回退不到上一个页面,适合单页面的切换
router.replace();

//可对比history.go()的用法
router.go();

router导航守卫

router导航守卫有全局的、路由独享的、组件的。

假设从A页面 -> B页面 -> C 页面,如果按回退按钮的话,想回到A页面,而不是正常的回退到B页面,该怎么实现呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//router --> index.js

import Vue from 'vue'
import Router from 'vue-router'
import a from '@/components/a' //a 组件
import b from '@/components/b' //b 组件
import c from '@/components/c' //c 组件

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
component: a
},
{
path: '/a',
component: a
},
{
path: '/b',
component: b,
beforeEnter: (to, from, next) => {
from.path == '/c' ? next('/') :next();
}
//beforeEnter 在进入这个路由之前,先判断是从哪个路由跳转的
},
{
path: '/c',
component: c
}
]
})

在路由独享的守卫,使用next(‘/‘),或者其他路由,是不会报错的。但是如果在组件里使用,是会报错的,在组件里只能使用,也必须要调用next()

history.length

运行项目,打开控制台,分别打印下historyhistory.length,可以看到路由是保留在数组里的,并且能获得length值,那么我们就可以直接跳转到首页

1
2
let len = history.length;
history.go(-(len-1));

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :