首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue路由器-当替换路由视图时,在另一个之上渲染

Vue路由器-当替换路由视图时,在另一个之上渲染
EN

Stack Overflow用户
提问于 2018-05-28 06:27:16
回答 1查看 2.2K关注 0票数 0

当尝试用另一个路由替换当前的/login路由时,新的路由似乎会呈现在最后一个路由的顶部,这使得它的行为很奇怪。

router.js

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Main Page',
      component: MainPage,
      redirect: 'front-page',
      children: [
        {
          path: 'front-page',
          name: 'Front page',
          component: FrontPage,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'home',
          name: 'Home page',
          component: HomePage,
          meta: {
            requireAuth: true,
          },
        },
      ],
    },
    {
      path: '/profile',
      name: 'Profile page',
      component: UserProfilePage,
      meta: {
        requireAuth: true,
      },
    },
    {
      path: '/login',
      name: 'Login page',
      component: LoginPage,
      meta: {
        requireAuth: false,
      },
    },
    {
      path: '/register',
      name: 'Registration page',
      component: RegistrationPage,
      meta: {
        requireAuth: false,
      },
    },
  ],
});

login.vue

result() {
  if (this.loginQuery.sessionToken) {
    this.setAuthToken(this.loginQuery.sessionToken);
    this.$router.replace('/front-page');
  }
},
EN

回答 1

Stack Overflow用户

发布于 2018-05-28 09:40:41

您的问题可能来自重定向,没有必要使用重定向将'home‘设置为默认路由,请尝试以下代码:

const router = new Router({
  mode: 'history',
  routes: [
    {
      name: 'Main Page',
      component: MainPage,
      children: [
        {
          path: '/front-page',
          name: 'Front page',
          component: FrontPage,
          meta: {
            requireAuth: true,
          },
        },
        {
          path: '/',
          name: 'Home page',
          component: HomePage,
          meta: {
            requireAuth: true,
          },
        },
      ],
    },
    {
      path: '/profile',
      name: 'Profile page',
      component: UserProfilePage,
      meta: {
        requireAuth: true,
      },
    },
    {
      path: '/login',
      name: 'Login page',
      component: LoginPage,
      meta: {
        requireAuth: false,
      },
    },
    {
      path: '/register',
      name: 'Registration page',
      component: RegistrationPage,
      meta: {
        requireAuth: false,
      },
    },
  ],
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50557080

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档