vue學習日記：vue路由搭建

vue路由搭建參考了iview-admin的路由搭建風格。在router文件夾下新建router.js文件，代碼如下：

import login from '@/components/login'; import Main from '@/components/Main'; // 不作為Main組件的子頁面展示的頁面單獨寫，如下
export const loginRouter = { path: '/login', name: 'login', meta: { title: 'Login - 登錄' }, component: login }; // 作為Main組件的子頁面展示但是不在左側菜單顯示的路由寫在otherRouter里
export const otherRouter = { path: '/', name: 'otherRouter', redirect: '/home', component: Main, children: [ { path: 'home', title: 'home', name: 'home_index', component: () => import('@/components/home/home.vue') } ] }; // 作為Main組件的子頁面展示並且在左側菜單顯示的路由寫在appRouter里
export const appRouter = [ { path: '/user', icon: 'key', name: 'user', title: '用戶管理', component: Main, children: [ { path: 'index', title: 'user', name: 'user_index', component: () => import('@/components/user/user.vue') } ] } ]; // 所有上面定義的路由都要寫在下面的routers里
export const routers = [ loginRouter, ...appRouter, otherRouter ];

在index.js中引入router.js。代碼如下：

import Vue from 'vue'; import Router from 'vue-router'; import {routers} from './router'; Vue.use(Router); // 路由配置
const RouterConfig = { routes: routers }; export default new Router(RouterConfig);

以后關於路由攔截的部分就寫入index.js中。

項目結構截圖：