Vue router安装及使用方法解析


Posted in Vue.js onDecember 02, 2020

对于单页应用,官方提供了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
});

这里只是做了一些简单的介绍,更多选项其参考官方文档http://router.vuejs.org/zh-cn/。

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

Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue如何清空对象
Mar 03 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
You might like
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
学python需要去培训机构吗
2020/07/01 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python 可视化神器Plotly详解
2020/12/26 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
热能动力工程毕业生自荐信
2013/11/07 职场文书
实习生自荐信范文
2013/11/13 职场文书
导购员的岗位职责
2014/02/08 职场文书
关爱留守儿童标语
2014/06/18 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
工作证明书
2015/06/15 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
学校少先队工作总结
2015/08/12 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python