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中。

项目结构截图：