vue项目没有router文件夹_使用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')

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