vue 第五天 路由的基本使用；路由重定向(redirect)；嵌套路由的做法(children)；动态匹配路由(id,props,$route.params.id)；命名路由；编程导航用法

--------------------- 基本概念与原理 ------------------------

1.1 路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
在开发中，路由分为：

1. 后端路由
   概念：根据不同的用户 URL 请求，返回不同的内容
   本质：URL 请求地址与服务器资源之间的对应关系
2. 前端路由
   概念：根据不同的用户事件，显示不同的页面内容
   本质：用户事件与事件处理函数之间的对应关系
3. 实现简易前端路由
   基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
   
            // 通过 location.hash 获取到最新的 hash 值
            switch (location.hash.slice(1)) {
   
                case '/zhuye':
                    vm.comName = 'zhuye'
                    break
                case '/keji':
                    vm.comName = 'keji'
                    break
                case '/caijing':
                    vm.comName = 'caijing'
                    break
                case '/yule':
                    vm.comName = 'yule'
                    break
            }
        }

1.2 SPA（Single Page Application）

1. 后端渲染（存在性能问题）
2. Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
3. SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
4. SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
5. 在实现SPA过程中，最核心的技术点就是前端路由

--------------------- vue-router的基本 -----------------------

2.1 基本使用步骤

1. 引入相关的库文件 （注意顺序，vue.js要在前面）

<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 --> 
<script src="./lib/vue_2.5.22.js"></script>
<!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 -->
<script src="./lib/vue-router_3.0.2.js"></script>

2. 添加路由链接 （类似 a 标签）

<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 --> <router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

3. 添加路由填充位 （占位符）

<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 --> 
<router-view></router-view>

4. 定义路由组件 （占位符里显示的内容，注意 首字母大写）

 	var User = {
   
		 template: '<div>User</div>'
	 }
	 var Register = {
   
		 template: '<div>Register</div>'
	 }

5. 配置路由规则并创建路由实例

 // 创建路由实例对象 
 var router = new VueRouter({
   
 // routes 是路由规则数组
	 routes: [
 // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
 // path 表示当前路由规则匹配的 hash 地址
 // component 表示当前路由规则对应要展示的组件
		 {
   path:'/user',component: User},
		 {
   path:'/register',component: Register}
	 ]
 })

6. 把路由挂载到 Vue 根实例中

 new Vue({
   
 el: '#app',
 // 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上
 router  // 等同于 router：router  ，因为实例名称等于router
 });

2.2 路由重定向 （ redirect ）

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

	var router = new VueRouter(