使用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')

這樣子組織之后看起來順眼。團隊想要協同開發也是方便