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 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js实现图片无缝滚动
Dec 23 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php短址转换实现方法
2015/02/25 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
同学聚会通知短信
2015/04/20 职场文书
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS