虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持。它与Vue.js深度集成,可快速的创建单页应用(Single Page Application,SPA)。

一、基本用法

  首先需要引入vue和vue-router两个库,如果像下面这样全局引用(即存在全局变量Vue),那么vue-router会自动调用Vue.use()方法注册其自身;但如果以模块的方式引用,那么就得显式地调用Vue.use()。

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

  然后添加两个内置的组件,第一个是导航用的router-link组件,它默认会被渲染成<a>元素,如果要渲染成其它元素,那么可以使用它的tag属性;第二个是路径匹配时用于渲染视图的router-view组件,它还是一个函数式组件,如下所示。

<div id="container">
<router-link to="/main">首页</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>
</div>

  再声明要渲染的组件,这些组件会与指定的路由映射,下面是两个非常简单的自定义组件。

const Main = { template: '<div>首页</div>' };
const List = { template: '<div>列表</div>' };

  接着定义路由配置,添加一组路径以及对应的组件,如下所示。

const routes = [
{ path: '/main', component: Main },
{ path: '/list', component: List }
];

  最后创建路由器实例,并将之前的路由配置传递进来,在挂载根实例时,需要将它注入,从而让整个应用都有路由功能,如下所示。

const router = new VueRouter({
routes: routes
});
var vm = new Vue({
el: "#container",
router: router
});

  注意,router实例包含三个导航方法:push()、replace()和go(),可以用编程的方式进行导航。

  页面在渲染完成后,得到的DOM结构如下所示,此时router-view组件所占的位置无任何内容。

<div id="container">
<a href="#/main" class="">首页</a>
<a href="#/list" class="">列表</a>
</div>

  当router-link组件所对应的路由匹配成功时,其渲染出的元素会被自动添加一个CSS类:router-link-active。例如点击首页链接,得到的结构如下所示,注意,此时router-view组件被替换成了Main组件中的内容。

<div id="container">
<a href="#/main" class="router-link-active">首页</a>
<a href="#/list" class="">列表</a>
<div>首页</div>
</div>

二、路由模式

  Vue Router默认采用URL hash模式来保持页面和URL的同步,其创建的URL格式需要包含井号(#),如下所示。

http://pwstrick.com/#/main

  Vue Router还有另外一种history模式,利用HTML5 History来保持页面和URL的同步,其创建的URL格式在视觉上更为简洁清晰,如下所示。

http://pwstrick.com/main

  如果要开启history模式,那么需要在路由配置时添加mode选项,并赋予history关键字,如下所示(直接修改了上一节中的示例)。

const router = new VueRouter({
mode: "history",
routes: routes
});

  注意,当直接访问history模式创建的URL时,会返回一个404页面。为了避免这种情况的发生,建议在服务器上配置一个默认的候选页面。

三、路由

  本节不仅会介绍动态路由的概念,还会分析路由的命名和嵌套等操作。

1)动态路由

  Vue Router采用的路径匹配引擎是path-to-regexp,它支持动态路由的匹配,例如有一个List组件,需要根据路径中的页码参数把组件渲染成不同的内容,可以像下面这样配置。

const List = { template: '<div>{{$route.params.page}}</div>' };
const routes = [
{ path: '/list/:page', component: List }
];

  在路由配置中,以冒号开头的:page是路径参数,它的值会被保存到路由对象$route的params属性中。路由对象不仅包含解析URL得到的信息(例如路径、查询字符串、锚点等),还有匹配到的路由信息(例如路由名称、路由记录等)。当路径是/list/1时,$route.params的值为{page: 1},params是一个对象,其键值与路径参数对应。注意,一条路径可以包含多个不同的路径参数。

  当一个路径能匹配多个路由时,匹配优先级会按照路由的定义顺序来排,即先定义的,优先级高。下面的配置包含两个路由,当路径是/list/1时,只会渲染List组件。

const routes = [
{ path: '/list/:page', component: List },
{ path: '/list/1', component: Main }
];

2)命名路由

  可以在配置时为路由标识一个名称,从而就能在使用时省略路径了,如下所示,name属性的值就是路由名称。

const routes = [
{ path: '/list/:page', component: List, name: "list" }
];

  如果要导航到一个命名路由,那么需要动态地绑定to属性,并为其传入路由的名称以及可选的URL参数,如下所示。

<router-link :to="{ name: 'list', params: {page: 3} }">第三页</router-link>

3)嵌套路由

  Vue Router允许嵌套路由,可通过多层嵌套的组件实现。下面是一个使用示例,首先在一个组件中声明router-view视图组件,如下所示。

const List = { template: '<router-view></router-view>' };
const Detail = { template: '<div>详情</div>' };

  然后在路由配置中,添加children选项,并定义子路由。

const routes = [
{
path: "/list",
component: List,
children: [{ path: "detail", component: Detail }]
}
];

  在经过这一系列操作后,当路径是/list/detail时,Detail组件就会被渲染到List组件的视图中。

  嵌套路由可用来渲染多个不同层级的视图,而利用命名视图可渲染多个同级的视图。在下面的代码中,为第二个router-view组件添加了name属性,赋予它一个名称,而第一个router-view组件的默认名称为default。

<router-view></router-view>
<router-view name="detail"></router-view>

  在路由配置时,新增用于记录各个命名组件的components选项,如下所示。

const routes = [
{
path: "/named",
components: {
default: Main,
detail: Detail
}
}
];

  当路径是/named时,Main和Detail两个组件会被同时渲染。

四、重定向和别名

1)重定向

  在路由配置中,通过redirect选项可重定向到一个新的页面,该选项可取的值有三种,分别是路径、命名路由和回调函数,如下所示,其中函数中的to参数表示目标路由对象。

const routes = [
{ path: "/list/1", redirect: "/main" },
{ path: "/list/1", redirect: {name: "main"} },
{ path: "/list/1", redirect: to => "/main" }
];

  当访问的路径是/list/1时,浏览器的地址栏会变成/main,匹配的将是路径为/main的路由。

2)别名

  在路由配置中,通过alias选项可定义路由的别名,如下所示。

const routes = [
{ path: "/list/4", component: Detail, alias: "/detail" }
];

  当访问的路径是/main时,浏览器的地址栏保持为/main,但匹配的将是路径为/list/4的路由。

五、组件传参

  除了在组件中通过$route.params获取路由参数之外,还能将路由参数作为组件的props传入,从而将组件和路由解耦,如下所示。

const List = {
props: ["page"],
template: "<div>{{page}}</div>"
};
const routes = [
{ path: "/list/:page", component: List, props: true }
];

  需要注意的是,在路由配置时要添加props选项,并赋予true后,才会让路由参数和props关联。

六、导航守卫

  导航守卫就是路由发生变化时的钩子函数,Vue Router提供了三类守卫:全局、路由独享和组件级。

1)全局守卫

  在路由器实例上可注册三个全局守卫,分别是beforeEach()、beforeResolve()和afterEach()。

  beforeEach()是一个全局前置守卫,包含三个参数(如下所示),其中to是目标路由对象、from是来源路由对象,next是一个回调函数,用于解析(resolve)当前守卫。

router.beforeEach((to, from, next) => {
next();
});

  由于导航在所有守卫解析之前会处于等待状态(即不会改变路径,也不会渲染对应的组件),因此在回调中不能省略next()函数。注意,该函数不仅能处理导航,还能将其中断或重定向,甚至注册一个错误。

  beforeResolve()是一个全局解析守卫,其参数和beforeEach()的相同,在导航被确认前,并且组件内的守卫和异步路由组件被解析之后调用。afterEach()是一个全局后置守卫,它只有to和from两个参数。

2)路由守卫

  在路由配置中可直接定义beforeEnter()守卫,作用于某个单独的路由而非全局,其参数和beforeEach()的相同,如下所示。

const routes = [
{
path: "/list",
component: List,
beforeEnter: (to, from, next) => {
next();
}
}
];

3)组件守卫

  组件内的导航守卫包含三个,如下所列,它们的参数都和beforeEach()的相同,也是to、from和next。

  (1)beforeRouteEnter():由于该组件在导航确认前被调用,因此组件还未被创建,从而访问this无法得到组件实例。但next()函数能接收一个参数为组件实例的回调,如下所示。

const List = {
beforeRouteEnter: function(to, from, next) {
next(vm => {
//vm是组件实例
});
}
};

  (2)beforeRouteUpdate():可通过this得到组件实例,当路由发生变化,但复用了一个组件时,会调用该守卫。例如一个路径为/list/:page的路由(如下配置所示),在将/list/1导航至list/2时,由于渲染的都是List组件,因此会调用beforeRouteUpdate()守卫。

const routes = [
{
path: "/list/:page",
component: List
}
];

  (3)beforeRouteLeave():也可通过this得到组件实例,当路由改变,并且渲染的组件不同时,会调用该守卫。例如有两条路径/main和/list,分别对应Main和List组件,在List组件中声明了beforeRouteLeave()守卫(如下所示),当从/list导航至/main时,会弹出确认框,判断是否需要取消本次导航。

const List = {
beforeRouteLeave: function(to, from, next) {
const answer = window.confirm("是否离开当前页?");
answer ? next() : next(false);
}
};

4)解析流程

  完整的导航解析流程如下所列。

(1)导航被触发。

(2)在失活的组件里调用beforeRouteLeave()守卫。

(3)调用全局的beforeEach()守卫。

(4)在重用的组件里调用beforeRouteUpdate()守卫。

(5)在路由配置里调用beforeEnter()守卫。

(6)解析异步路由组件。

(7)在被激活的组件里调用beforeRouteEnter()守卫。

(8)调用全局的beforeResolve()守卫。

(9)导航被确认。

(10)调用全局的afterEach()守卫。

(11)触发DOM更新。

(12)用创建好的实例调用beforeRouteEnter()守卫中传给next参数的回调函数。

Vue躬行记(8)——Vue Router的更多相关文章

  1. Vue躬行记(1)——数据绑定

    Vue.js的核心是通过基于HTML的模板语法声明式地将数据绑定到DOM结构中,即通过模板将数据显示在页面上,如下所示. <div id="container">{{c ...

  2. Vue躬行记(2)——指令

    Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...

  3. Vue躬行记(3)——样式和表单

    Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算 ...

  4. Vue躬行记(4)——组件

    组件是可复用的Vue实例,拥有属于自己的数据.模板.脚本和样式,可避免繁重的重复性开发.由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信. 一.注册 在使用 ...

  5. Vue躬行记(5)——组件通信

    组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式. 一.直接访问 Vue提供了三个实例属性,可直接访问父组件.子组件和根实例,如下所列. (1)$parent:父组件. (2)$ro ...

  6. Vue躬行记(6)——内容分发

    Vue提供了一种内容分发技术,可将父组件中的内容传递给子组件的模板,实现方式参照了Web组件规范草案. 一.插槽 Vue内置了一个<slot>元素,能作为插槽(slot)存在,而插槽内可包 ...

  7. Vue躬行记(7)——渲染函数和JSX

    除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分 ...

  8. Vue躬行记(9)——Vuex

    Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景.Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性.正确性和可预测性,这不仅让调试变得可追踪,还让代 ...

  9. ES6躬行记(1)——let和const

    古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...

随机推荐

  1. SpringCloud教程二:Ribbon(Finchley版)

    在上一篇文章,讲了服务的注册和发现.在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的.Spring cloud有两种服务调用方式,一种是ribbon+r ...

  2. Sieve of Eratosthenes时间复杂度的感性证明

    上代码. #include<cstdio> #include<cstdlib> #include<cstring> #define reg register con ...

  3. Api版本管理

    关于SpringMVC中如何添加,这一篇说的很详细了. http://www.cnblogs.com/jcli/p/springmvc_restful_version.html 版本管理可以通过路径进 ...

  4. opencv::自定义线性滤波

    卷积概念 常见算子 自定义卷积模糊 卷积概念 1.卷积是图像处理中一个操作,是kernel在图像的每个像素上的操作. 2.Kernel本质上一个固定大小的矩阵数组,其中心点称为锚点(anchor po ...

  5. cmake::编译一个工程

    1.编译工程,构建过程产生的临时文件等文件与源码隔离,避免源码被污染. # CMake 最低版本号要求 cmake_minimum_required (VERSION 2.8) # 项目信息 proj ...

  6. 浅谈K-means聚类算法

    K-means算法的起源 1967年,James MacQueen在他的论文<用于多变量观测分类和分析的一些方法>中首次提出 “K-means”这一术语.1957年,贝尔实验室也将标准算法 ...

  7. Leetcode(4)寻找两个有序数组的中位数

    Leetcode(4)寻找两个有序数组的中位数 [题目表述]: 给定两个大小为 m 和 n 的有序数组 nums1 和* nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O( ...

  8. 使用诊断工具观察 Microsoft.Extensions.DependencyInjection 2.x 版本的内存占用

    目录 准备工作 大量接口与实现类的生成 elasticsearch+kibana+apm asp.net core 应用 请求与快照 Kibana 上的请求记录 请求耗时的分析 请求内存的分析 第2次 ...

  9. (四)Kinect人脸识别

    kinect可以通过摄动摄像头不仅可以获取人脸位置旋转信息,也可以获取脸部轮廓的三维坐标 可以参考插件中的场景KinectFaceTrackingDemo1-4,在kinectManager基础上需要 ...

  10. Xbim.GLTF源码解析(三):Builder类

    原创作者:flowell,转载请标明出处:https://www.cnblogs.com/flowell/p/10838706.html IFC提取转换成GLTF的逻辑在Builder类中, Buil ...