vue.js路由跳转详解


Posted in Javascript onAugust 28, 2017

本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下

1、路由demo示例

<div id="app">
  <h1>Hello App!</h1>
  <p>
  <!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
 </div>

2、路由的跳转

router-link是一个组件,默认被渲染成一个带有链接的a标签,通过to属性指定链接地址。
注意:被选中的router-link将自动添加一个class属性值 .router-link-active 

1)、router-link的to属性

这是一个必须设置的属性,否则路由无法生效。它表示路由的链接,可以是一个字符串也可以是一个描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
 
<!-- 渲染结果同上  使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
 
<!-- 渲染结果同上  不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
 
<!-- 渲染结果同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
 
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 此时路由如下定义,name也可为中文
const routes = [
 { path: '/user', component: user, name: 'user' }
];
 
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

这里如果是简单的路由跳转,可以写成to也是可以是:to 或者是v-bind:to 

2、replace

一个布尔类型,默认为false。如果replace设置为true,那么导航不会留下history记录,点击浏览器回退按钮不会再回到这个路由。

<router-link to="goods" replace></router-link>

3、tag

router-link默认渲染成a标签,也有方法让它渲染成其他标签,tag属性就用来设置router-link渲染成什么标签的。

<!-- 渲染成li标签 -->
<router-link to="goods" tag="li"></router-link>

4、active-class

上面说了被选中的router-link将自动添加一个class属性值.router-link-active,这个属性就是来修改这个class值的。

<!-- 改变router-link的active时的classname -->
<router-link to="goods" active-class="router-active'></router-link>

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

Javascript 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
BootStrap入门学习第一篇
Aug 28 #Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 #Javascript
js制作简单的音乐播放器的示例代码
Aug 28 #Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 #Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
You might like
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python的re正则表达式实例代码
2018/01/24 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python感知机实现代码
2019/01/18 Python
python实现弹跳小球
2019/05/13 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
django-csrf使用和禁用方式
2020/03/13 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
实习自我鉴定范文
2013/10/30 职场文书
自我鉴定三原则
2014/01/13 职场文书
租房协议书范例
2014/10/14 职场文书
员工评语范文
2014/12/31 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
德劲DE1105机评
2022/04/05 无线电
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python