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遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
Javascript类型判断相关例题及解析
Aug 26 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时间不正确的解决方法
2008/04/09 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
ExtJS 入门
2010/10/29 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
js中url对象化管理分析
2017/12/29 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python检测服务器端口代码实例
2019/08/31 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
人事主管岗位职责说明书
2014/07/30 职场文书
诚实守信主题班会
2015/08/13 职场文书
九年级语文教学反思
2016/03/03 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS