vue router 路由切换时地址更改了,router-view内容未切换

发布于 2022-09-11 20:14:51 字数 7575 浏览 14 评论 0

版本日志点击切换正常,若跳转至世界观的话table所在的router-view不切换 路由地址与显示router-view内容不匹配

图片描述

图片描述

图片描述

import Vue from 'vue'
import Router from 'vue-router'
import Home from './home'
import Project from './project'
import LogIn from './logIn'
import User from './user'
// import Opinion from './opinion'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    // base: process.env.BASE_URL,
    base: 'heaven',
    routes: [
        Home,
        Project,
        LogIn,
        User,
        // Opinion,
        {
            path: '/*',
            redirect: '/login'
        }
    ]
})

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
        next();
    }else {
        let token = localStorage.getItem('Authorization');
        if (token === null || token === '') {
            next('/login');
        } else {
            next();
        }
    }
});

export default router;

//Project内容
export default {
    path : '/project',
    name:'project',
    component : () => import('@/views/project'),
    children : [
        {
            path : 'information',
            name:'information',
            component : () => import('@/components/information'),
            children:[
                {
                    path : 'detailLog',
                    name :'detailLog',
                    component : () => import('@/components/detailLog'),
                },
                {
                    path : 'detailVersion',
                    name :'detailVersion',
                    component : () => import('@/components/detailVersion'),
                },
                {
                    path : '/project/information',
                    redirect : '/project/information/detailLog'
                }
            ]
        },
        {
            path : 'worldView',
            name:'worldView',
            component : () => import('@/components/worldView'),
            children:[
                {
                    path : 'current',
                    name :'worldCurrent',
                    component : () => import('@/components/worldViewCurrent'),
                    children:[
                        {
                            path : 'worldLog',
                            name :'worldCurrentLog',
                            component : () => import('@/components/worldLog'),
                        },
                        {
                            path : 'worldVersion',
                            name :'worldCurrentVersion',
                            component : () => import('@/components/worldVersion'),
                        },
                        {
                            path : '/project/worldView/current',
                            redirect : '/project/worldView/current/worldLog'
                        }
                    ]
                },
                {
                    path : 'detail',
                    name :'worldDetail',
                    component : () => import('@/components/worldViewDetail'),
                    children:[
                        {
                            path : 'worldLog',
                            name :'worldLog',
                            component : () => import('@/components/worldLog'),
                        },
                        {
                            path : 'worldVersion',
                            name :'worldVersion',
                            component : () => import('@/components/worldVersion'),
                        },
                        {
                            path : '/project/worldView/detail',
                            redirect : '/project/worldView/detail/worldLog'
                        }
                    ]
                },
                {
                    path : '/project/worldView',
                    redirect : '/project/worldView/current'
                }
            ]
        },
        {
            path : 'role',
            name:'role',
            component : () => import('@/components/role'),
            children:[
                {
                    path : 'list',
                    name :'list',
                    component : () => import('@/components/roleList'),
                    children:[
                        {
                            path:'view',
                            name:'view',
                            component : () => import('@/components/roleListView'),
                        },
                        {
                            path:'leftRight',
                            name:'leftRight',
                            component : () => import('@/components/roleLeftRight'),
                            children:[
                                {
                                    path : 'roleVersion',
                                    name :'roleViewVersion',
                                    component : () => import('@/components/roleLog'),
                                },
                                {
                                    path : 'roleNotes',
                                    name :'roleNotes',
                                    component : () => import('@/components/roleVersion'),
                                },
                                {
                                    path : '/project/role/list/leftRight',
                                    redirect : '/project/role/list/leftRight/roleVersion'
                                }
                            ],
                            
                        },
                        {
                            path : '/project/role/list',
                            redirect : '/project/role/list/view'
                        },
                    ]
                },
                {
                    path : 'roleDetail',
                    name :'roleDetail',
                    component : () => import('@/components/roleDetail'),
                    children:[
                        {
                            path : 'roleLog',
                            name :'roleDetailLog',
                            component : () => import('@/components/roleLog'),
                        },
                        {
                            path : 'roleVersion',
                            name :'roleDetailVersion',
                            component : () => import('@/components/roleVersion'),
                        },
                        {
                            path : '/project/role/detail',
                            redirect : '/project/role/detail/roleLog'
                        }
                    ]
                },
                {
                    path : '/project/role',
                    redirect : '/project/role/list'
                }
            ]
        },
        {
            path : 'concept',
            name:'concept',
            component : () => import('@/components/concept')
        },
        {
            path : 'story',
            name:'story',
            component : () => import('@/components/story')
        },
        {
            path : '/project',
            redirect : '/project/information'
        }
    ]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

深海少女心 2022-09-18 20:14:51

检查一下你的父路由由里面是否使用到了<keep-alive>这个标签,用这个标签的话是把这个路由加入缓存,之后当前路由的view视图不会在重新渲染了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文