Vue-Router详解

1.安装和使用vue-router

步骤一：安装vue-router  ：npm install vue-router --save

步骤二：在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)

              第一步：导入路由对象，并且调用 Vue.use(VueRouter)

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

Vue.use(VueRouter)

              第二步：创建路由实例，并且传入路由映射配置

              第三步：在Vue实例中挂载创建的路由实例

步骤三：

        第一步: 创建路由组件

        第二步: 配置路由映射: 组件和路径映射关系

         第三步: 使用路由: 通过<router-link>和<router-view> 

         

            

 2.路由懒加载

   路由懒加载 主要作用就是将路由对应的组件打包成一个个的js代码块。

   只有在这个路由被访问到的时候, 才加载对应的组件。

方式一: 结合Vue的异步组件和Webpack的代码分析.

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二: AMD写法

const About = resolve => require(['../components/About.vue'], resolve);

方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.

const Home = () => import('../components/Home.vue')