一，前言
上篇，介绍了源码环境搭建与路由模式，主要涉及以下几个点：
本篇，路由的使用介绍；
二，VueRouter 的使用
2.1，安装依赖
2.2，注册路由插件，导出路由实例
创建 router.js 管理路由插件的配置，并导出 Router 实例：
import Vue from 'vue';import Router from './vue-router';
// 通过 Vue.use 使用 Router 插件：// 全局注册两个组件：router-link、router-view；// 为实例提供两个原型属性：$router，$route；Vue.use(Router);
export default new Router({ mode:'hash', routes:[ { path:'/', // 路径 name:'', // 名字 component:ABC // 路径显示的组件 } ]});
复制代码
2.3，标签和属性的介绍
执行Vue.use(Router)之后，默认会调用 Router 插件的 install 方法：
以下内容来自 VueRouter 官网：
2.4，配置视图组件
创建视图组件： views/Home.vue 和 views/Mine.vue：
<!-- views/Home.vue --><template> <div>首页</div></template>
<!-- views/Mine.vue --><template> <div>我的</div></template>
复制代码
引入视图组件，配置路由和视图的映射关系：
import Vue from 'vue';import Router from './vue-router';import Router from './node_modules/vue-router';import Home from './views/Home';import Mine from './views/Mine';
Vue.use(Router);
export default new Router({ mode:'hash', routes:[ { path:'/', // 路径 name:'', // 名字 component: Home // 路径显示的组件 },{ path:'/', name:'', component: Mine } ]});
复制代码
2.5，将 Router 实例注册到 Vue 实例中
引入 router.js 中配置完成的路由实例，并将路由实例注册到 Vue 实例中：
// main.js
import Vue from 'vue';import router from './router'; // 导入路由配置
const vm = new Vue({ el:'#app', router, // 将路由实例注册到 Vue 实例中 render:(h)=>{ return h('h1', {}, 'Hello Vue Router'); }});
复制代码
2.6，配置路由组件的渲染位置
创建根组件 App.vue 用于显示视图渲染后的结果：
<template> <div> <!-- 页面渲染结果 --> <router-view></router-view> </div></template>
复制代码
使用 h 方法渲染 App.vue，使 App.vue zuo 作为视图入口：
import Vue from 'vue';import router from './router';import App from './App.vue';
const vm = new Vue({ el:'#app', router, render:(h)=>{ return h(App);// 使用 h 方法渲染 App 组件 }});
复制代码
2.7，启动服务并测试
根据路由配置，测试对应视图的显示：
访问首页：http://localhost:8080/#/
访问我的：http://localhost:8080/#/ mine
备注：由于理由使用了 hash 模式，URL 默认会被添加 '/#/' 部分
2.8，添加路由的切换
<template> <div> <!-- 添加路由切换 --> <router-link to="/">跳转至首页</router-link>   <router-link to="/mine">跳转至我的</router-link> <!-- 显示页面渲染的内容 --> <router-view></router-view> </div></template>
复制代码
2.9，测试路由切换效果
点击跳转到首页，浏览器访问：http://localhost:8080/#/
点击跳转到我的，浏览器访问：http://localhost:8080/#/mine
2.10，实例属性 $route 和 $router
执行Vue.use(Router)之后，默认会调用 Router 插件的 install 方法：
测试 Vue 实例上的 router和route：
// views/Home.vue
<template> <div>首页</div></template>
<script>export default { mounted(){ // this.$route：路由相关的属性 // this.$router：路由相关的方法 console.log('this.$route', this.$route) console.log('this.$router', this.$router) }}</script>
复制代码
2.11，嵌套路由的使用和注意事项
VueRoute 支持嵌套路由（理论上是无限级的）；
测试：在 mine 视图中添加子路由：
import Vue from 'vue';import Router from './node_modules/vue-router';import Home from './views/Home';import Mine from './views/Mine';
Vue.use(Router);
export default new Router({ mode:'hash', routes:[ { path:'/', component: Home },{ path:'/mine', component: Mine, children: [{ // 子路由 path: 'user', // 如果是 /user 会被认为根路径，所以不能有/ component: { render:(h)=><h1>个人信息</h1> } }, { path: 'address', component: { render:(h)=><h1>地址管理</h1> } } ] } ]});
复制代码
备注：
若子路由路径的开头为'/',将表示为根路径；子路由一般不使用'/'开头；如：path:'/user' -> http://localhost:8080/#/user
子路由路径开头使用'/'，需要配置为准确的 URL 地址；如：path:'/mine/user' -> http://localhost:8080/#/mine/user
复制代码
在我的页面添加 router-view 标签，配置个人信息和地址管理的渲染位置：
<template> <div>我的 <router-link to="/mine/user">我的-个人信息</router-link>   <router-link to="/mine/address">我的-地址管理</router-link> <router-view></router-view> </div></template>
复制代码
测试子路由效果：
我的页面：
点击路由切换子页面：
三，结尾
本篇，介绍了路由的配置和使用，主要包含以下内容：
下篇，介绍路由插件 install 的实现；
评论