Vue.js常用插件之router路由（上）

Posted byeno

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js常用插件之router路由（上）相关的知识，希望对你有一定的参考价值。

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 Vue.js常用插件之router路由（上）

1、vue钩子函数具体是指什么：

  • vue生命周期中有一定执行顺序的接口函数，用户可以根据这些暴露的函数处理自己的数据，渲染页面

  • 简单点来说，就是在生命周期执行流程中预留的一个能让我们执行自己代码的地方。叫钩子函数，很形象，钩子，即可以用于挂载我们自己的东西。

2、强烈推荐博文(对Vue.js生命周期会有一个更细致的理解)：
Vue2.0 探索之路——生命周期和钩子函数的一些理解：
https://segmentfault.com/a/1190000008010666

第7章 Vue.js常用插件

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 Vue.js常用插件之router路由（上） Vue.js常用插件之router路由（上）

Vue.js本身只提供了数据与视图绑定及组件化等功能，如果想用它来开发一个完整的SPA(Single Page Application)应用，还需要使用到一些Vue.js的插件。本章主要介绍Vue-router和Vue-resource，分别能提供路由管理和数据请求这两个功能。除此之外，还有Vue-devtools，这是一款方便查看Vue.js实例数据的chrome插件，这个插件对于开发和调试都有很大的帮助。

7.1 Vue-router

Vue-router是给Vue.js提供路由管理的插件，利用hash(简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数)的变化控制动态组件的切换。
以往页面间跳转都由后端MVC中的Controller层控制，通过<a>标签的href或者直接修改location.href，之后会向服务端发起一个请求，服务端响应后根据所接受到的信息去获取数据和指派对应的模板，渲染成html再返回给浏览器，解析成我们可见的页面。Vue.js+Vue-router的组合将这一套逻辑放在前端去执行，切换到对应的组件后再向后端请求数据，填充进模板来，在浏览器端完成HTML的渲染。这样也有助于前后端分离，前端不用依赖于后端逻辑，只需要后端提供数据接口即可。
本章部分代码会采用ES6的写法，运行时需要使用Babel进行编译(注Babel主要用于ES6转为ES5进行使用，附ES6学习之Babel的正确安装姿势：
https://www.cnblogs.com/zhenwen/archive/2016/07/17/5679589.html)。

7.1.1 引用方式
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdn.jsdeliver.net/vue.router/0.7.10/vue-router.min.js"></script>

也可以采用npm的方式安装：

npm install vue-router

引用方式如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
7.1.2 基本用法

vue-router的基本作用就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。常规路径规则为在当前url路径后面加上#!/path,path即为设定的前端路由路径。如下案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-router基本用法</title>
  <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
  <script src="https://cdn.jsdeliver.net/vue.router/0.7.10/vue-router.min.js"></script>
</head>
<body>
  <div id="app">
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li>
              <!-- 使用 v-link指令，path的值对应跳转的路径，即#!/home -->
              <a v-link="{path:'/home'}">Home</a>
            </li>
            <li>
              <a v-link="{path:'/list'}">List</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
      <!-- 路由切换组件template插入的位置 -->
      <router-view></router-view>
    </div>
  </div>
  <script>
    //创建子组件，相当于路径对应的页面
    var Home=Vue.extend({
      template:'<h1>This is the home page</h1>'
    });
    //创建根组件
    var App=Vue.extend({})
    //创建路由器实例
    var router=new VueRouter();
    //通过路由器实例定义路由规则(需要在启动应用前定义好)
    //每条路由会映射到一个组件。这个值可以是由Vue.extend创建的组件构造器函数(如Home)
    //也可以直接使用组件选项对象(如'/list'中component对应的值)
    router.map({
      '/home':{
        component:Home
      },
      '/list':{
        component:{
          template:'<h1>This is the List page</h1>'
        }
      }
    })
    //路由器实例会创建一个Vue实例，并且挂载到第二个参数元素选择器匹配的DOM上
    router.start(App,"#app");
  </script>
</body>
</html>

浏览器最终展示：
Vue.js常用插件之router路由（上）

7.1.3 嵌套路由

一般应用中的路由方式不会像上例那样简单，往往会出现二级导航这种情况，这时就需要使用嵌套路由这种写法。可以给上述例子添加一个Biz组件，包含一个嵌套的router-view，修改如下：

var Biz=Vue.extend({
      template:'<div>\
      <h1>This is the some business channel</h1>\
      <div class="container">\
        <ul class="nav navbar-nav">\
          <li>\
            <a v-link="{path:\'/biz/list\'}">List</a>\
          </li>\
          <li>\
            <a v-link="{path:\'/biz/detail\'}">Detail</a>\
          </li>\
        </ul>\
        </div>\
        <router-view></router-view>\
      </div>'
    });

路由配置修改如下：

router.map({
      '/home':{
        component:Home
      },
      '/biz':{
        component:Biz,
        subRoutes:{
          '/list':{
            component:{
              template:'<h2>This is the business list page</h2>'
            }
          },
          '/detail':{
            component:{
              template:'<h2>This is the business detail page</h2>'
            }
          }
        }
      }
    })

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-嵌套路由</title>
  <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
  <script src="https://cdn.jsdeliver.net/vue.router/0.7.10/vue-router.min.js"></script>
</head>
<body>
  <div id="app">
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li>
              <!-- 使用 v-link指令，path的值对应跳转的路径，即#!/home -->
              <a v-link="{path:'/home'}">Home</a>
            </li>
            <li>
              <a v-link="{path:'/biz'}">Business</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
      <!-- 路由切换组件template插入的位置 -->
      <router-view></router-view>
    </div>
  </div>
  <script>
    //创建子组件，相当于路径对应的页面
    var Home=Vue.extend({
      template:'<h1>This is the home page</h1>'
    });
    //创建Biz组件
    var Biz=Vue.extend({
      template:'<div>\
      <h1>This is the some business channel</h1>\
      <div class="container">\
        <ul class="nav navbar-nav">\
          <li>\
            <a v-link="{path:\'/biz/list\'}">List</a>\
          </li>\
          <li>\
            <a v-link="{path:\'/biz/detail\'}">Detail</a>\
          </li>\
        </ul>\
        </div>\
        <router-view></router-view>\
      </div>'
    });
    //创建根组件
    var App=Vue.extend({})
    //创建路由器实例
    var router=new VueRouter();
    //通过路由器实例定义路由规则(需要在启动应用前定义好)
    //每条路由会映射到一个组件。这个值可以是由Vue.extend创建的组件构造器函数(如Home)
    //也可以直接使用组件选项对象(如'/list'中component对应的值)
    router.map({
      '/home':{
        component:Home
      },
      '/biz':{
        component:Biz,
        subRoutes:{
          '/list':{
            component:{
              template:'<h2>This is the business list page</h2>'
            }
          },
          '/detail':{
            component:{
              template:'<h2>This is the business detail page</h2>'
            }
          }
        }
      }
    })
    //路由器实例会创建一个Vue实例，并且挂载到第二个参数元素选择器匹配的DOM上
    router.start(App,"#app");
  </script>
</body>
</html>

点击Biz中的List链接，url路由即为#!/biz/list，页面显示如下：
Vue.js常用插件之router路由（上）
点击List和Detail即可在#!/biz/list和#!/biz/detail之间切换，而顶部的This is the some business channel部分，即Biz组件中非 部分则保持不变。

7.1.4 路由匹配

Vue-router在设置路由规则的时候，支持以冒号开头的动态片断。例如在设计列表分页的情况下，我们往往会在url中带入列表的页码，路由规则就可这么设计：

router.map({
      '/list/:page':{
        component:{
          template:'<h1>This is the No.{{$route.params.page}} page</h1>'
        }
      }
    })

例如/list/1，/list/2(单就/list路径并不会匹配)这样的路径名就会匹配到对应的组件中，并在组件中通过路由对象(this.$route)的方式获取:page具体的值。
一条路由规则中支持包含多个动态片断，例如：

router.map({
      '/list/:page/:pageSize':{
        component:{
          template:'<h1>This is the No.{{$route.params.page}} page,{{$route.params.pageSize}}per page</h1>'
        }
      }
    })

除了以冒号:开头的动态片断:page外，Vue-router还提供了以*号开头的全匹配片断。全匹配片断会包含所有符合的路径，而且不以'/'为间隔。例如在路由/list/:page中，规则能匹配/list/1,/list/2路径，但无法匹配/list/1/10这样的路径。而/list/*page则可以匹配/list/1,以及/list/1/10这样的路径，不会因为'/ '而中断匹配。page值也就成为整个匹配到的字符转，即1或1/10。

7.1.5 具名路径

当设置路由规则时，可以给路径名设置一个别名，方便进行路由跳转，而不需要去记住过长的全路径。如下：

router.map({
      '/list/:page':{
        name:'list',
        component:{
          template:'<h1>This is the No.{{$route.params.page}} page</h1>'
        }
      }
    })

然后就可以使用v-link指令链接到该路径：

<a v-link="{name:'list',params:{page:1}}">List</a>
7.1.5路由对象

在使用Vue-router启动应用时，每个匹配的组件实例中都会被注入router的对象，称之为路由对象。在组件内部可以通过this.$route的方式进行调用。
路由对象总共包含了以下几个属性：

  1. $route.path
    类型为字符串，为当前路由的绝对路径，如/list/1。

  2. $route.params
    类型为对象。包含路由中动态片断和全匹配片断的键值对。如上述例子中的/list/:page路径，就可以通过this.$route.params.page的方式来获取路径上page的值。

  3. $route.query
    类型为对象。包含路由中查询参数的键值对。例如/list/1?sort=createTime，通过this.$route.query.sort即可得到createTime。

  4. $router.router
    即路由实例，可以通过调用其go,replace方法进行跳转。在组件实例中也可以直接调用this.$router来访问路由实例。

  5. $route.matched
    类型为数组。包含当前匹配的路径中所有片断对应的匹配参数对象。例如在/list/1/?sort=createTime路径。

  6. $route.name
    类型为字符串，即为当前路由设置的name属性。

7.1.7 v-link

v-link是vue-router应用中用于路径间跳转的指令，其本质是调用路由实例router本身的go函数进行跳转。该指令接受一个javascript表达式，而且可以直接使用组件内绑定的数据。
常见的使用方式包含以下两种：

  1. 直接使用字面路径：
    <a v-link="'home'">Home</a>
    (注意这里双引号里的home需要加上单引号，不然会变成读取组件data属性中的home值)。
    或者写成：
    <a v-link="{path:'home'}">Home</a>

  2. 使用具名路径，并可以通过params或者query设置路径中的动态片断或查询变量：

<a v-link="{name:'list'},params:{page:1}">List Page 1</a>

此外，v-link还可以包含其他参数选项：

  1. activeClass
    类型为字符串，如果当前路径包含v-link中的path的值，该元素会自动添加activeClass值的类名，默认为v-link-active。

  2. exact
    类型为布尔值。在判断当前是否为活跃路径时，v-link默认的匹配方式是包容性匹配，即如果v-link中path为/list，那以/list路径为开头的所有路径均为活跃路径。而设置exact为true后，则只有当路径完全一致时才认定为活跃路径，然后添加class类名。

  3. replace
    类型为布尔值。若replace值设定为true,则点击链接时执行的是router.replace()方法，而不是router.go()方法。由此产生的跳转不会留下记录。

  4. append
    类型为布尔值。若append值设定为true，则确保链接的相对路径添加到当前路径之后。例如在路径/list下，设置链接
    <a v-link="{path:'1',append:true}">1</a>,
    点击则路径变化为/list/1；若不设置append:true，路径变化为/1。

7.1.8 路由配置项

在创建路由器实例的时候，Vue-router提供了以下参数可供配置：
(1). hashbang
默认值为true，即只在hash模式下可用。当hashbang值为true时，所有的路径会以#!为开头。例如：
<a v-link="{{path:'/home'}}">Home</a>，浏览器路径即为：http://hostname/#!/home
(2). history
默认值为false。设为true时启动HTML5 history模式，利用history.pushState()和history.replaceState()来管理浏览器历史记录。由于使用了history模式管理，所以使用pushState生成的每个url都需要在Web服务器上有对应的响应，否则单击“刷新”会返回404错误，并且在本地开发的时候，需要将应用置于服务器环境中(通过localhost访问应用，而不是直接访问文件)。
常见的服务器nginx可以修改其目录下的conf/nginx.conf或conf/vhost/*.conf文件，添加如下配置，以满足pushState的需求：

server{
      listen        80;           //端口号
      server_name   localhost;    //或填写服务器名
      index        index.html  index.php;    //默认访问文件
      root /www                   //文件放置路径
      location / {
        //这是一个正则匹配，将所有该域名下的url请求，都返回SPA应用的index.html，确保pushState有响应
        rewrite ^(.+)$ /index.html last;
      }
    }

(3). abstract
默认值为false。提供了一个不依赖于浏览器的历史管理工具。在一些非浏览器场景中会非常有用，例如electron(桌面软件打包工具，类似于node-webkit)或者cordova(native app打包工具)应用。
(4). root
默认为null，仅在HTML5 history模式下可用。可设置一个应用的根路径，例如：/app。这样应用中的所有跳转路径都会默认加载这个根路径之后，例如：
<a v-link='/home'>Home</a>，路径即变化为/app/home。
(5). linkActiveClass
默认值为v-link-active。与v-link中的activeClass选项类似，这里相当于是一个全局的设定。符合匹配规则的链接即会加上linkActiveClass设定的类名。
(6). saveScrollPosition
默认值为false，仅在HTML5 history模式下可用。当用户点击后退按钮时，借助HTML5 history中的popstate事件对应的state来重置页面的滚动未知。需要注意的是，当router-view设置了场景切换效果时，该属性不一定能生效。
(7). transitionOnLoad
默认值为false。在router-view中组件初次加载时是否使用过度效果。默认情况下，组件在初次加载时会直接渲染，不使用过渡效果。
(8). supperessTransitionError
默认值为false。设定为true后，将忽略场景切换钩子函数中发生的异常。

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放

以上是关于Vue.js常用插件之router路由（上）的主要内容，如果未能解决你的问题，请参考以下文章

vue.js之路由

Vue之 vue-router

Vue.js的路由之——vue-router快速入门

Vue.js 生态之vue-router

Vue.js 生态之Vue-router 基础三

Vue的路由Router之导航钩子和元数据及匹配