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 相关文章推荐
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python生成二维码的实例详解
2017/10/29 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
python为什么要安装到c盘
2020/07/20 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
小学开学寄语
2014/01/19 职场文书
还款承诺书范文
2014/05/20 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
新课培训心得体会
2014/09/03 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
医生辞职信范文
2015/03/02 职场文书
2015年林业工作总结
2015/05/14 职场文书
业务员年终工作总结2015
2015/05/28 职场文书