vue关于router路由

1.关于路由我们为了简介和方便我们可以把路由的相关配置放到另外的一个文件之中 下面是没有分离之前的

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Admin from '../layout/admin.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Admin', // component: Admin, // 或者 component: () => import(/* webpackChunkName: "about" */ '../layout/admin.vue'), children:[ { path: '/user/list', name: 'Admin', component: () => import(/* webpackChunkName: "about" */ '../components/user/list.vue'), } ] }, { path: '/index', name: 'Admin', component: () => import(/* webpackChunkName: "about" */ '../components/index.vue'), }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

2.分离流程 2.1新建文件router.js

// 导出 export default[ { path: '/', name: 'Admin', // component: Admin, // 或者 component: () => import(/* webpackChunkName: "about" */ '../layout/admin.vue'), children:[ { path: '/user/list', name: 'Admin', component: () => import(/* webpackChunkName: "about" */ '../components/user/list.vue'), } ] }, { path: '/index', name: 'Admin', component: () => import(/* webpackChunkName: "about" */ '../components/index.vue'), }, ]

2.2

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Admin from '../layout/admin.vue' // 引入 import routers from './router.js' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, // 注册 routes:routers }) export default router