vue-router

模块化使用

导入Vue和VueRouter，调用Vue.user(VueRouter)
引入组件（静态加载）
定义路由（每个路由映射一个组件）
创建router实例，然后传 routes 配置
通过router配置参数注入路由

router/index.js

import Vue from 'vue'
import VueRouter from "vue-router"

import Home from "@/views/home"
Vue.use(VueRouter)

const routes = [
    //头部import进来的组件不会懒加载
    {path : '/home' , component : Home , name : 'home' },
    //在路由声明时候通过import()引进来的是懒加载形式
    {
        path:'/list',
        component:()=>import('@/views/list.vue'),
        name:'list'
    },
    // 嵌套路由
    {
        path:'/stystem',
        component:()=>import('@/views/system.vue'),
        redirect: "/system/usermanage",
        children:[
        	{ path : '/ststem/usermanage', component:()=>import('@/view/system/userManage.vue')}
        ]
    },
    //动态匹配路由 动态路径参数 以冒号开头
     {
         path:'/detail:/id',
         component:()=>import('@/views/detail.vue')
     },
     // 通配符 * ，以下会匹配所有 user- 开头的路由
     {
         path:'/user-*',
         component:()=>import('@/views/user.vue')
     },
     // 以下会匹配所有的路由，一般用来显示404 页面，注意要放在最后面，
     {
         path:'*',
         component:()=>import('@/views/404.vue')
     }
]

const router = new VueRouter({
    mode:'history',
    routes
})

export default router

import

import命令会被 JavaScript 引擎静态分析，引擎处理 import 语句是在编译时

在编译期间 Webpack 会按照所有的 import 把它们编译成一个 js 文件。
import()

import()是一个语法糖，返回的是一个Promise对象,它是运行时执行，在加载完成后返回模块对象。
ensure

在没有import()之前，webpack用ensure实现异步加载，

main.js

// 在webpack的resolve（解析）配置中有mainFiles选项，作用是配置解析目录时要使用的文件名，默认是 ["index"],所以可以不用写index。”
import router from "@/router"
// webpack的resolve（解析）配置中的modules这个选项起作用，告诉webpack 解析模块时应该搜索的目录，默认是["node_modules"]，所以才会直接去node_modules里面寻找。
import Vue from "vue"
import App from "./App.vue"

new Vue({
    router,
    render:h=>h(App)
}).$mount("#app");

Vue-Router

vue-router

模块化使用