VueJs路由跳转——vue-router的使用详解


Posted in Javascript onJanuary 10, 2017

对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成。

安装

基于传统,我更喜欢采用npm包的形式进行安装。

npm install vue-router --save

当然,官方采用了多种方式进行安装,包括bower,cdn等。

基本用法

在HTML文档中使用,只需要利用v-link这个directive就行了,如:

<a v-link="{path: '/view-a'}">Go to view-a</a>

​ps: v-link还支持activeClass用于指定链接活跃时的css样式。replace属性为true的时候可以让链接在跳转的时候不会留下历史记录。

而在ES5中使用,需要先创建路由器实例,随后传入配置参数即可,如:

var router = new VueRouter();

router.map({
 '/view-a': {
 component: ViewA
 },
 '/view-b': {
 component: ViewB
 }
});

router.start(App, '#app');

以上定义的路由器规则,采用映射到一个组件的方式,最后启动应用的时候,挂载到#app的元素上。

当然,如果你想采用ES6的语法进行配置,也是很容易做到的:

先建立一个路由器模块,主要进行配置和绑定相关信息

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter(); //这里可以带有路由器的配置参数

router.map({
 '/view-a': {
 component: ViewA
 },
 '/view-b': {
 component: ViewB
 }
});

export default router; //将路由器导出

在app.js入口启动文件中启用该路由器

import Vue from 'vue';
import router from './routers';

router.start(App, '#app');

嵌套路由

如果想要使用嵌套路由,如/a/b则可以更新路由配置

router.map({
 '/a': {
 component: A,
 subRoutes: {
 '/b': {
 component: B
 }
 }
 }
});

同时,你需要在组件A和组件B中使用<router-view>,如:

<div id="app">
 <router-view></router-view>
</div>

组件A中,使用嵌套的外链

<div id="A">
 <h1>
 This is component A
 </h1>
 <router-view></router-view>
</div>

路由器将自动渲染对应的组件以及更新路由信息。

其中<router-view>可以传递props,支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果,被渲染的组件将注册到父级组件的this.$对象上。

路由对象和路由匹配

路由对象,即$router会被注入每个组件中,可以利用它进行一些信息的获取。如

属性 说明
$route.path 当前路由对象的路径,如'/view/a'
$rotue.params 关于动态片段(如/user/:username)的键值对信息,如{username: 'paolino'}
$route.query 请求参数,如/foo?user=1获取到query.user = 1
$route.router 所属路由器以及所属组件信息
$route.matched 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name 当前路径名字

当然,你也可以在自己定义路由规则(map)的时候自定义字段,用以特殊目的。

全匹配片段的语法是使用通配符* 如,/user/*any就会匹配到任何以/user为开头的路径,并给params对象中赋值一个属性any

动态片段的语法就是使用:作为标志。

使用路径名称

在定义路径规则的时候,如果你给它提供了一个name属性,则可以在后续使用这条路径规则的时候,直接引用。

router.map({
 '/user/:userId': {
 name: 'user',
 component: {...}
 }
});

在v-link中使用

<a v-link="{name: 'user', params: {userId: 1}">This is a user whose id is 1</a>

还可以使用router.go()

router.go({name: 'user', params: {userId: 1}});

最终都会匹配到/user/1这条路径上

路由选项

路由选项名 默认值 作用
hashbang true 将路径格式化为#!开头
history false 启用HTML5 history模式,可以使用pushState和replaceState来管理记录
abstract false 使用一个不依赖于浏览器的浏览历史虚拟管理后端。
transitionOnLoad false 初次加载是否启用场景切换
saveScrollPosition false 在启用html5 history模式的时候生效,用于后退操作的时候记住之前的滚动条位置
linkActiveClass "v-link-active" 链接被点击时候需要添加到v-link元素上的class类,默认为active

如,我想采用一个有路径格式化并启用Html5 history功能的路由器,则可以在路由器初始化的时候,指定这些参数:

var router = new VueRouter({
 hashbang: true,
 history: true
});

这里只是做了一些简单的介绍,最后,更多高级用法请参考官方文档。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
微信小程序实现tab页面切换功能
Jul 13 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
js自定义QQ菜单效果
Jan 10 #Javascript
js实现将json数组显示前台table中
Jan 10 #Javascript
详解Vue自定义过滤器的实现
Jan 10 #Javascript
JS实现的表头列头固定页面功能示例
Jan 10 #Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 #Javascript
微信小程序 地图map详解及简单实例
Jan 10 #Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 #Javascript
You might like
基于mysql的论坛(3)
2006/10/09 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP7新功能总结
2019/04/14 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
python输出指定月份日历的方法
2015/04/23 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
基于Python实现粒子滤波效果
2020/12/01 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
管理科学大学生求职信
2013/11/13 职场文书
二年级评语大全
2014/04/23 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
2014年接待工作总结
2014/11/26 职场文书
通知函的格式
2015/04/27 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书