文档章节

对router-link:to和$router.push的理解

YXMBetter
 YXMBetter
发布于 2017/08/24 13:40
字数 321
阅读 497
收藏 0
  • <router-link :to='/myroute'>跳转到我的路由</router-link>
    • 使用router-link方式跳转,会在页面渲染的时候就加载对应的路由
    • 比起直接写<a href = ''>的方式的优点:不管是h5的history还是hash模式,切换的时候很方便;会默认阻止浏览器的默认事件;写路径的时候不用写基路径了。
  • $router.push('/myroute')
    • 跳转到对应的路径,可在页面中写对应的点击事件,然后执行对应的方法中写跳转,可在跳转前再写一些别的逻辑。
  • 两种方式对于跳转来说是相同的。均可以实现。
  • 举例
<template>
   // router-link :to方式
   <router-link :to="/">跳到首页</router-link>
   //router.push方式
   <router-link :to='#' @click.native="logout">退出登录</router-link>
</template>
<javascript>
default export {
    data() {
        return {}
    },
    methods: {
        logout () {
            this.$router.replace('/logout');
        }
    }
}
<javascript>
  • 注意点
    • 退出登录不能直接使用router-link方式,因为router-link会在页面加载时就渲染,所以会在页面加载的时候直接退出,无法进入具体的应用;
    • 使用@click.native而不是@click的原因:vue官方库中有自己的事件处理机制,router-link会默认阻止浏览器的默认行为,可以使用.native来触发原生事件。
  • 有啥不清楚的可以留言`

© 著作权归作者所有

上一篇: css3的:not坑
下一篇: 滚动条样式设置
YXMBetter
粉丝 10
博文 173
码字总数 111562
作品 0
昌平
程序员
私信 提问
Vue2.0笔记——vue-router路由

简介 使用Vue.js开发SPA(Single Page Application)单页面应用。 vue-router可以通过html5的history API或者hash实现单页应用,即不刷新跳转,切换地址,只是页面上的组件的切换; vue-rout...

逝岁月
2018/04/24
0
0
Vue进阶(二十六):router.push()讲解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/85220888 在Vue2.0路由跳转中,除了使用 创建 a 标签来定义导航链接,我们还可...

Lo秀娴ve
2018/12/23
0
0
vue-router 入门学习

对于单页面应用,尤其是移动端的网页应用,使用标签实现页面切换和跳转会有300ms的延迟,遇到网速慢就会一直加载。所以在SPA应用中,用视图切换来模拟页面的切换 vue-router 是Vue.js官方的路...

frwupeng517
2017/08/05
0
0
vue2.0 vue-router总结

在项目中安装: npm install vue-router --save 2. 在项目中引入: // The Vue build version to load with the command // (runtime-only or standalone) has been set in webpack.base.con......

danielnasri
2018/11/29
0
0
web前端vue:路由安装与配置

跟AngularJS一样,vue.js也很适合用来做大型单页应用。vue本身并没有提供路由机制,但是官方以插件(vue-router)的形式提供了对路由的支持,可以直接npm安装地址: npm install vue-ruoter...

奇惠儿
2018/01/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

读书replay《maven实战》.1.20190526

前情提要 maven这个工具用了好久了,但是一直都用的迷迷糊糊的,没有对它进行过系统性的学习,只是知道一些常用的功能怎么实现,所以20190516这一天我从JD购买了徐晓斌老师所著的《maven实战...

wanxiangming
35分钟前
0
0
真实项目案例实战——【状态设计模式】使用场景

什么是状态模式 状态模式允许一个对象在其内部状态改变的时候改变其行为。这个对象看上去就像是改变了它的类一样。 状态模式应用场景 1.一个对象的行为取决于它的状态,并且它必须在运行时刻根...

须臾之余
42分钟前
1
0
Java 实现把字符串转换成整数【底层实现】

https://blog.csdn.net/zl18310999566/article/details/80263396

qimh
45分钟前
0
0
IDEA的debugger

1、win下节省内存空间 3、条件断点

一只小青蛙
56分钟前
3
0
炸!亿级数据DB秒级平滑扩容

一步一步,娓娓道来。 一般来说,并发量大,吞吐量大的互联网分层架构是怎么样的? 数据库上层都有一个微服务,服务层记录“业务库”与“数据库实例配置”的映射关系,通过数据库连接池向数据...

编程SHA
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部