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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 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
php入门学习知识点三 PHP上传
2011/07/14 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
JQuery工具函数汇总
2015/06/15 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
React组件的三种写法总结
2017/01/12 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Python多线程实现同步的四种方式
2017/05/02 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python调试神器PySnooper的使用
2019/07/03 Python
django框架中间件原理与用法详解
2019/12/10 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
社区服务活动小结
2014/07/08 职场文书
品牌转让协议书
2014/08/20 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
聊聊golang中多个defer的执行顺序
2021/05/08 Golang