5. Vue 路由

概述

后端路由：通过用户请求的 url 导航到具体的 html 页面；每跳转到不同的 URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回 HTML，也可以是直接返回模板 HTML ，然后由前端 js 再去请求数据，使用前端模板和数据进行组合，生成想要的 HTML

前端路由：在单页面应用，大部分页面结构不变，只改变部分内容的使用。主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

前端路由和后端路由的区别：

1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。但是前端路由使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

Vue 路由的基本使用

1. 导入 vue-router 组件类库

<script src="lib/vue-router-2.7.0.js"></script>

必须先导 vue 的包，vue-router 依赖于 vue

1. 使用 router-link 组件导航

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

router-link 默认渲染为 a 标签，可以用 tag 属性指定渲染的标签类型，例如 tag=“span” ,则渲染为 span 标签

3. 使用 router-view 显示匹配到的组件

<router-view></router-view>

路由规则匹配到的组件，展示到这里，因此 router-view 可以看作是一个占位符

4. 创建组件模板对象

var login = Vue.extend({
	template: '<h1>登录组件</h1>'
});

var register = Vue.extend({
	template: '<h1>注册组件</h1>'
});

5. 创建路由实例，通过 routes 属性定义路由匹配规则

var router = new VueRouter({
      routes: [
		{ path: '/', redirect: '/login' },//路由重定向
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
});

route 表示路由匹配规则，每个路由规则都是一个对象，每个对象必须有两个属性：（1）path：监听的路由地址；（2）component：地址对应的组件

注：component 的值必须是组件模板对象，不能是组件引用名称

路由重定向，也通过 routes 配置完成

6. 创建 Vue 实例，使用 router 属性使用路由规则

 var vm = new Vue({
      el: '#app',
      //属性和值相同时，可以简写，例如 router:router 可简写为
      router
 });

路由规则中定义参数

方式一：

1. 使用查询字符串，给路由传递参数，不需要修改路由中的 path 属性

<router-link to="/login?id=10&name=zs">登录</router-link>

2. 使用 $route.query 来获取路由中的参数

var login = {
	template: '<h1>{ $route.query.id }}-
        {{$route.query.name }}</h1>',
}

方式二：

1. 在规则中定义参数

{ path: '/register/:id', component: register }

2. 通过 this.$route.params 来获取路由中的参数：

var register = Vue.extend({
      template: '<h1>{{this.$route.params.id}}</h1>'
});

children 属性 路由嵌套

在路由实例中的 routes 属性中使用 children 属性进行路由嵌套

var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        }
    ]
})

注：children 属性中的 path 属性不要带 / ,带 / 从根路径开始请求，不便于用户理解

命名视图——同级展示多个视图

有时需要同时展示多个视图，例如：头部区域，侧边栏，主体区域 的经典布局，利用命名视图可以在界面中拥有多个单独命名的视图

<div id="app">
    <router-view></router-view>
    <div class="container">
       	<router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>
</div>

var router = new VueRouter({
    routes: [
        {
            path: '/', components: {
                'default': header,
                'left': leftBox,
                'main': mainBox
            }
        }
    ]
})