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 树控件 比较好用
Jun 11 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 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
php下批量挂马和批量清马代码
2011/02/27 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
积极分子思想汇报
2014/01/04 职场文书
小学语文课后反思精选
2014/04/25 职场文书
普通党员整改措施
2014/10/24 职场文书
搞笑结婚保证书
2015/05/08 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL