如何使用 Vue Router 重定向路由？答案

【问题标题】：How to redirect routes using Vue Router?如何使用 Vue Router 重定向路由？
【发布时间】：2020-10-08 23:01:21
【问题描述】：

这是我第一次使用 Vue.JS，我正在按域组织我的应用程序，例如，有一个主路由器文件我将一些路由重定向到正确的域。

               +--> /users +
               |           |         +-----------------+
+--------------+           |         |     +-----------+
|              |           |         |     |           |    + Profile
|  Index Page  |           |         |users        <--------+ Create
|              |           +-------> |     |           |
|              |                     |     +-----------+
+--------------+                     +-----------------+

在/users里面有一个users-routes.js，里面有：

const userRoutes = [
  {
    path: '/profile',
    component: () = import('./views/users/UserProfile')  
  }
];

export default userRoutes

搜索一些代码，我必须在我的主要路线中申请：

import Vue from 'vue'
import Router from 'vue-router'
import { userRoutes } from './views/users/users-routes'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Index'),
      children: [
        // Dashboard
        {
          name: 'Dashboard',
          path: '',
          component: () => import('@/views/Dashboard'),
        },
      ],
    },
    {
      path: '/users',
      redirect: '/users',
    },
  ], 
  ...userRoutes
})

我通过指向...userRoutes 行收到两个警告。

27:5 错误尾随空格不允许无尾随空格
28:19 错误缺少尾随逗号 comma-dangle

我应该如何进行？

【问题讨论】：

处理 vue 路由/重定向的最佳方式之一-blog.logrocket.com/vue-middleware-pipelines
错误是 linting 错误：no-trailing-spaces 和 comma-dangle

标签： vue.js vue-router

【解决方案1】：

必填，“我知道你想做 A。A 不好。改用 B。”

正如文档指出的那样，正确且更简单的选择是将路由保留在主 ./src/router.js 中。从那里，有一个vuex 值为isLoggedIn。然后在“用户”页面的template 层中，在用户是否登录时执行v-if。

这可以更进一步，在created钩子中，可以检查用户是否登录。如果没有，路由器可以将用户推送到登录页面（或任何一个; 也许您正在使用登录模式）。

【讨论】：