vue路由

Vue.js - vue路由

一 什么是路由

1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

2. 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；我们的路由就指这个。

    www.baidu.com#/login  
    http在发送请求的时候，#后面的不会发送，只会在当前页面中跳来跳去。
   

3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

二 路由的基本使用

1. 使用组件login,只限于在HTML使用,其他地方使用的是组建的模板对象

   	Vue.component('login', {
     		template: '<h1>登录组件</h1>'
      })
   

2. 安装 vue-router 路由模块

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

3. 创建一个路由对象

   1.当导入 vue-router 包之后，
   在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
   2.在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
   3.配置对象属性：route-路由匹配规则
      每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
      属性1 是 path， 表示**监听** 哪个路由链接地址；
      属性2 是 component， 表示如果 路由是前面匹配到的 path ，
                        	则展示 component 属性对应的那个组件
      注意：  component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称；
      属性3 是redirect，客户端页面内重定向
   
      var routerObj = new VueRouter({
      	 routes: [      
      	        { path: '/', redirect: '/login' }, //客户端页面内重定向
      	        { path: '/login', component: login },
      	        { path: '/register', component: register }
      	      ],
           linkActiveClass: 'myactive'
      })
   

4. 关联vue关系-通过vue的router属性

    将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router: routerObj 
          });
   

5. 定义组件

    // 组件的模板对象
      var login = {
        template: '<h1>登录组件</h1>'
      }
   
      var register = {
        template: '<h1>注册组件</h1>'
      }
   

6. 渲染a标签

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

三 在 vue 中使用 vue-router

1. 导入 vue-router 组件类库：

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

2. 使用 router-link 组件来导航

    相当于a标签：<a href="#/login">登录</a> 
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
   

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

    <router-view></router-view>
   

4. 创建使用Vue.extend创建组件

    // 4.1 使用 Vue.extend 来创建登录组件
     var login = Vue.extend({
      	template: '<h1>登录组件</h1>'
    });
   
    // 4.2 使用 Vue.ex