使用vue-router在项目中的路由目录和文件管理和一些注意事项（较完美的方案）

直接看目录结构

这里的文件名建议都是单个单词命名。

看index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import home from './home'
import items from './items';
import user from './user';
import order from './order';
import login from './login';
import message from './message';
Vue.use(Router)

const RouterModel = new Router({
  mode: 'history',
  base: '/', // 当后台路由有这个时候就要加上
  routes: [...home,...items ,...user, ...order,...login, ...message]
})

RouterModel.beforeEach((to, from, next) => {
  // 这个位置做一些关于传参，重定向等事情
    
  if (!store.getters.token) {
    // 比如这种重定向到登录页的操作，还有可能接参数（对于每个页面的参数就不要在这里写逻辑了）
   if (to.meta.login) {
     store.dispatch('FedLogOut')
     Toast.fail(I18n.t('requestErrText.pleaseLogin'))
     next({ name: 'login', query: { redirect: to.name }})
     return
   }
  }

  next()
})
// RouterModel.afterEach(() => {
//   Toast.clear()
// })

export default RouterModel

再看一下login.js其他都是一个格式，展示一个即可

 

export default [
  {
    // 主登录页
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login')
  },
  {
    // 注册页
    path: '/login/register',
    name: 'register',
    meta: {
      keepAlive: true
    },
    component: () => import('@/views/login/register')
  }
]

这里要注意的就是你的 @/views/login/login 这个是我的文件路径名字也是组件的名字。这样做方便自己在看到页面路由的时候就能找到相应的文件。保持这种习惯，对自己和团队都有好处。

在main.js中引入

import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这样子组织之后看起来顺眼。团队想要协同开发也是方便