Question

当我按下“刷新”（F5）按钮时，路由器将我定向到主页。刷新页面后如何保持在同一页面上？

那是路线，模式是“历史”

const routes = [
   { path: '*', redirect: '/'  }, 
  {
    path: '/', component: template_Default, redirect: '/Login',
    children: [
      { path: 'Login', component: login_, name: 'Login' },
      { path: 'SignUp', component: signUp_, name: 'SignUp' }
    ]
  },
  {
    path: '/Main', component: template_Home, name: 'Main', redirect: '/Main/Overview',
    children: [
      { path: 'Overview', component: overview_, name: 'Overview' },
      { path: 'Customer', component: customer_, name: 'Customer' },
      { path: 'Task', component: task_, name: 'Task' },
      { path: 'Order', component: order_, name: 'Order' },
      { path: 'Product', component: product_, name: 'Product' },
      { path: 'Setting', component: setting_, name: 'Setting' }
    ]
  },
  {
    path: '/ForgotPassword', component: forgotPassword_, name: 'ForgotPassword', 
    // redirect: '/ForgotPassword/GetEmail',
    // children: [
    //   { path: 'GetEmail', component: forgotPasswordGetEmail, name: 'GetEmail' },
    //   { path: 'ReSend', component: forgotPasswordReSend, name: 'ReSend' }

    // ]
  }
]

还有我的控制器，

router.beforeEach((to, from, next) => {
    // redirect to login page if not logged in and trying to access a restricted page
    const publicPages = ['/Login','/SignUp','/ForgotPassword'];
    const authRequired = !publicPages.includes(to.path);
    const loggedIn = store.getters.isLoggedIn;
    
    if (authRequired && !loggedIn) {
      return next('/Login');
    }else next();
    if(loggedIn){
      AuthController.IsOnline();
    }
    
  })

先谢谢了。

Answer 1

问题是您将[array([1]), array([0])]作为路由数组中的第一项。根据{{3}}：

使用星号路由时，请确保正确排列您的路由，以使星号结尾。

这是因为Vue路由器按顺序搜索您的路由列表，并返回第一个匹配的路由。星号将匹配所有路由，因此，当您刷新页面时，它将返回第一条路由并将您重定向到“ /”。

Answer 2

这里有同样的问题，但是我的路线没有{ path: '*', redirect: '/' } 这是我的代码。

export const routes = [
    {
      path:'/login',
      component: login,
      name: 'home'
    },
    {
      path:'/',
      component: mainapp,
      name: 'mainapp',
      meta: {
                requiresAuth: true
            },
                children: [
            {
                path:'/dash',
                component: dashboard,
                name: 'dashboard'
            },
            {
                path:'/dept',
                component: dept,
                name: 'department'
            },
            {
                path: '/deptDetail',
                component: deptDetail,
                name: 'detail'
            },
            {
                path:'/hrd',
                component: HRD
            },
            {
                path:'/notify',
                component: notify
            },
            {
                path:'/device',
                component: device
            },
            {
                path:'/setup',
                component: setup,
                name: 'setup'
            },
            {
                path:'/scanArea',
                component: area,
            },
            {
                path:'/env',
                component: environment,
            },
            {
                path:'/record', /* debug page */
                component: record,
            },
            {
                path:'/redis', /* debug page */
                component: redis,
            },
            {
                path:'/permit',
                component: permit,
            },
            {
                path:'/app',
                component: app,
            }
        ]
    },
  ]

Vue-Router：刷新（F5）当前页面

2 个答案: