将 vue 路由拆分到多个文件( vue-router 目录结构)
对于稍微复杂点的项目,我们定义的路由文件,会越来越大,而且所有路由都混在一个页面,看着也很混乱,不清晰。所以,想把 vue 路由也按功能,类似 laralel 一样,划分为多个路由文件,最终的路由结构类似下面:routes/index.jsaccount.jsstudent.jsbusiness.js...也可以是更深层次的嵌套school/...
·
对于稍微复杂点的项目,我们定义的路由文件,会越来越大,而且所有路由都混在一个页面,看着也很混乱,不清晰。
所以,想把 vue 路由也按功能,类似 laralel 一样,划分为多个路由文件,最终的路由结构类似下面:
routes/
index.js
account.js
student.js
business.js
...
也可以是更深层次的嵌套
school/account.js
school/user-center.js
...
index.js 的代码如下:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// 引入其他路由文件
import accountRoutes from '@/account';
import studentRoutes from '@/student';
import schoolAccountRoutes from '@/school/account';
const baseRoutes = [
...
];
const routes = baseRoutes.concat(accountRoutes, studentRoutes, schoolAccountRoutes);
export default new VueRouter({
routes,
});
其他文件代码:
let routes = [
{
path: '/',
name: 'home',
component: require('./pages/Home'),
meta: {}
},
{
path: '/about',
component: require('./pages/About'),
meta: {}
},
{
path: '/posts/:id',
name: 'posts',
component: require('./pages/posts/Post'),
meta: {}
},
];
export default routes;
更多推荐
已为社区贡献5条内容
所有评论(0)