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中常用的SET和GET
Jan 13 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
vue实现图片裁剪后上传
Dec 16 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
随机广告显示(PHP函数)
2006/10/09 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php生成word并下载代码实例
2019/03/15 PHP
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python解惑之True和False详解
2017/04/24 Python
python 中random模块的常用方法总结
2017/07/08 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python实现抽奖小程序
2020/04/15 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python datetime模块使用方法小结
2020/06/18 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
.NET方向面试题
2014/11/20 面试题
实习护理工作自我评价
2013/09/25 职场文书
岗位职责的含义
2013/11/17 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
运动会标语
2014/06/21 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL