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 相关文章推荐
juqery 学习之五 文档处理 插入
Feb 11 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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
一个分页的论坛
2006/10/09 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
基于python绘制科赫雪花
2018/06/22 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python assert语句的简单使用示例
2019/07/28 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
什么是会话Bean
2015/05/14 面试题
作风转变年心得体会
2014/10/22 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
MySQL的索引你了解吗
2022/03/13 MySQL