Vue 路由配置最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43579525/article/details/97616907

这篇博客介绍了如何在大型Vue项目中优化路由管理，将路由配置拆分为单独的文件，提高代码的可维护性。主要涉及三个部分：1) 在`src/router/router.js`中创建具体的路由模板；2) 在`src/router/index.js`作为路由主文件，负责整合所有路由；3) 最后在`main.js`中引入并应用这些路由配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.项目大了点话，都在一个路由文件里配置路由会显得臃肿不移维护，所以把路由配置单独抽离到一个文件里
文件路径：src > router > router.js

import Home from '@/views/Home.vue'

export const routes =[
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    meta: {
      title: '首页'
    },
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    meta: {
      title: '关于'
    },
    component: () => import('@/views/About.vue')
  },
  {
    path: '/login',
    name: 'login',
    meta: {
      title: '登录'
    },
    component: () => import('@/views/Login.vue')
  },
  {
    path: '*',
    name: '404',
    component: () => import('@/views/404.vue')
  },
]

2.路由主文件
文件路径：src > router > index.js

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

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 定义常量判断用户是否登录,这里给个固定值(一般都是根据后台接口返回的用户登录状态来判断是否登录)
const IS_LOGIN = false

// 路由守卫
router.beforeEach( (to,from,next) => {
    // 跳转到非登录页面的其他页面时需先判断是否登录
    if (to.path !== '/login') {
        // 未登录则跳转到登录页面
        if (IS_LOGIN) next()
        else next('/login')
        // path就是配置路由文件里的路由path(属性值一定要相同)
    }else{
        // 已登录则跳转到首页
        if (IS_LOGIN) next( '/home' )
        else next()
    }
} )

export default router

3.在main.js里引入路由配置

import Vue from 'vue'
import App from './App.vue'
//导入路由配置文件
import router from './router/index'
import store from './store/store'
import './registerServiceWorker'

Vue.config.productionTip = false

new Vue({
  //导入的路由
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue 路由模板