vue 登录拦截 成功后返回之前页面 不跳转问题 求助

• Z时代
• 2024-01-10
• 分类：技术分享

我这样写 跳转没反应 url 也不变化 但是 我直接this.$route.push('/') 是可以跳转的 请问是那里问题

我的路由写法

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import NProgress from 'nprogress'
import User from '../views/Public/index'
import store from '@/store'
import 'nprogress/nprogress.css'
// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
redirect: '/find',
children: [
{
path: '/find',
name: 'Find',
meta: {
keepAlive: true
},
component: () => import(/* webpackChunkName: "about" */ '../views/Find')
},
{
path: '/broadcasting',
name: 'Broadcasting',
component: () =>
import(/* webpackChunkName: "about" */ '../views/Broadcasting')
},
{
path: '/dynamic',
name: 'Dynamic',
component: () =>
import(/* webpackChunkName: "about" */ '../views/Dynamic')
},
{
path: 'personage',
name: 'Personage',
meta: {
requireAuth: true
},
component: () =>
import(/* webpackChunkName: "about" */ '../views/Personage')
}
]
},
{
path: '/user',
component: User,
redirect: '/login',
children: [
{
path: '/login',
name: 'Login',
component: () =>
import(/* webpackChunkName: "user" */ '../views/Public/login')
},
{
path: '/register',
name: 'Register',
component: () =>
import(/* webpackChunkName: "user" */ '../views/Public/registe')
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 全局路由守卫
router.beforeEach((to, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const nextRoute = [
'Personage',
'Dynamic'
]
const isLogin = store.getters.isLogin
// 未登录状态；当路由到nextRoute指定页时，跳转至login
if (nextRoute.indexOf(to.name) >= 0 && !isLogin) {
next({
path: '/login',
// 将跳转的路由path作为参数，登录成功后跳转到该路由
query: { redirect: to.fullPath }
})
} else {
next()
}
// 已登录状态；当路由到login时，跳转至home
if (to.name === 'Login') {
if (isLogin) {
console.log('已登录')
router.push({ path: '/find' })
}
}
})
router.afterEach(() => {
NProgress.done()
})
export default router

登录页面写法

    submit () {
switch (this.key) {
case 0:
if (paramsValidate(this.user)) {
const { phone, password } = this.user
_cellphone({ phone: phone, md5_password: md5(password) }).then(res => {
console.log(res)
this.$router.push(this.$router.currentRoute.query.redirect || '/')
})
}
break
case 1:
break
case 2:
break
}
},

回答

应该是跳了，还是走了这里，debugger看看

children的path没有'/'

personage的path没设置对，fullpath得到的(如：/login)，你漏了

以上是 vue 登录拦截 成功后返回之前页面 不跳转问题 求助 的全部内容， 来源链接： utcz.com/a/42475.html