vue-router 安装和使用入门教程

Question

一、vue-router 安装和使用

1、安装 vue-router

npm install vue-router --save

2、在模块化工程中使用它（因为是一个插件，所以可以通过 Vue.use() 来安装路由功能）
第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入·路由映射配置
第三步：在 Vue 实例中挂载创建的路由实例

3、使用 vue-router 的基本步骤
第一步：创建路由组件
第二步：配置路由映射：组件和路径映射关系
第三步：使用路由：通过 <router-link> 和 <router-view>

二、懒加载的方式

方式一、结合 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')