vue 编程式路由导航（不借助router-link）

最新推荐文章于 2024-01-26 11:12:17 发布
最新推荐文章于 2024-01-26 11:12:17 发布
阅读量562 收藏 1
点赞数
文章标签： vue router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/119257306
版权

要点：

 

我们之前一直使用router-link实现的跳转,而且它默认就是一个a标签所以如果需要对一个button标签进行跳转时,就不行了,或者需要实现当点击对应控件三秒后进行跳转这也是a标签办不到的 

这时我们就要使用到所有组件都有的router了 

在vuerouter的原型对象上有许多方法

注意原来是把跳转写在模板上,所以v-for的m可以直接读,但是现在写在方法里,要通过在模板上传参来获取m

 

 

 replace只要把这边的this.$router.push换成replace就行

 

 

而要实现前进和后退时,使用$router原型对象里面的back和forward

这样就行了

 

 而这边的go方法

这边go里面要传入参数 当为正数时.就相当于前进了几步,当为负数时就相当于后退了几步

总结
：

 

 

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router的路由导航router-link
caoxinjian423的博客
10-07 442
App.vue <template> <div id="app"> <div id="nav"> <!-- router-link应用于路由导航，相对于a标签，router-link可以在单页面跳转，体验更好 router-link的to参数可以接收字符串(path,不需要:进行属性绑定)，也可以接收一个对象（命名路由，需要:进行属性绑定）， 里面的name参数为要跳转到路由的名字
Vue-router中的路由懒加载（异步组件）
XinKun的博客
03-01 914
一、为什么使用路由懒加载 当项目越来越大时，vue打包后的js文件也越来越大，这会是影响加载时间的重要因素。当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。 二、懒加载的实现方式 方法一 resolve 这一种方法较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例： import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from
Vue学习：编程式路由导航（不借助router-link进行路由跳转）
weixin_47295886的博客
03-10 543
使用router-link标签进行路由跳转--》最终是转换成a标签，但是有些时候跳转不是a标签 是按钮也可以。使用$router进行操作--替换router-link m参数是上面传递。有两个按钮：push查看 replace查看。
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1134
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
(VUE2 STEP3)用router-link替代a herf
weixin_45553150的博客
04-28 233
在vue2.0中，原来的v-link指令已经被组件替代了 组件支持用户在具有路由功能的应用中点击导航。 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。 其实我目前也不太明白为什么这么改?有什么好处?没办法,技术一直是演进的.过1\2年又会有新的东西出来,又得重新学.这类技术我也懒的深究,...
vue不在一个路由配置中，怎么实现页面跳转？
stay hungry, stay foolish
05-18 1502
如果两个页面不在同一个路由配置中，可以使用HTML中的超链接标签，或者使用JavaScript中的location对象的方法进行页面跳转。
前端路由实现
m0_63836635的博客
09-02 2055
原生js实现前端路由以及Vue路由
vue路由 遍历生成复数router-link的例子
10-16
今天小编就为大家分享一篇vue路由 遍历生成复数router-link的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详谈vue中router-link和传统a链接的区别
10-15
`<router-link>` 是Vue Router提供的一个组件，用于在应用中实现平滑的导航。下面将详细探讨这两者的差异。 首先，`<router-link>` 在HTML5 history 模式和hash模式下表现一致，这意味着不论你选择哪种路由模式，`...
详解vue-router 2.0 常用基础知识点之router-link
12-09
总结起来，Vue Router 2.0 中的`router-link`、`$route.params`、`$route.query`和`meta`属性都是构建动态路由和处理导航的重要工具。它们使我们能够灵活地管理应用中的页面跳转和数据传递，同时提供了一种方式来...
Vue 页面跳转不用router-link的实现代码
08-27
主要介绍了 Vue 页面跳转不用router-link的实现代码，文中给大家介绍了vue router-link跳转传值示例,需要的朋友可以参考下
vue-router为激活的路由设置样式操作
11-20
在Vue.js应用中，Vue Router是官方推荐的路由管理库，它使得页面间的导航和状态管理变得简单。本文将详细讲解如何为Vue Router中的激活路由设置样式，以及解决子页面中`router-link`对应的导航栏激活样式问题。 ...
不借助router-link实现路由跳转的编程式路由导航
weilaaer的博客
10-23 210
1.作用:不借助 实现路由跳转，让路由跳转更加灵活。
Vue路由一共有4种
weixin_43825473的博客
07-17 1671
第一种标签<router-link> <router-link to=""/> <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 脚本 <router-link :to="{name:'home', p
vue的学习笔记：编程式路由导航（不借助＜router-link＞ 实现路由跳转，让路由跳转更加灵活）
xinbaiyu的博客
09-13 249
编程式路由导航 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活 具体编码： //$router的两个API this.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.forward()
Vue2 Router 路由器的使用_2
最新发布
qq_32768235的博客
01-26 220
给 router-link标签 加上replace属性就不会留下历史记录。
支持外部链接跳转的 Vue Router 扩展实现
素履独行 | 元培的个人博客
07-13 4177
众所周知，Vue-Router 是 Vue 中重要的插件之一，特别是在当下流行的 单页面应用/SPA 中，这种感觉会越来越明显。此时，路由的作用就是根据 来决定要显示什么内容。诚然，页面这个概念在工程/模块中依然存在，可当你开始关注最终发布的产物时，你会发现本质上它只有一个页面。无论你选择 或者是 模式的路由，它都像是在同一张纸上反复写写画画，让你看起来觉得它有很多个不同的页面。回顾早期的前端项目，它往往会有多个不同的页面组成，我们是通过一个个的超链接来实现不同页面间的跳转。如今，这一切都已一去不复返
Vue-VueRouter路由的使用(超详细)
Laollaoaolao的博客
09-15 2991
1.定义 理解:一个路由(route)就是一组映射关系(key-value),多个路由依靠路由器(router)进行管理 前端路由:key是路径，value是组件 2.基本使用 1.安装vue-router npm i vue-router 2.应用插件 Vue.use(Router) 3.编写router配置项 在router.js中(如果没有这个文件就自己创建) import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)
swiper在vue的不使用router的使用方法
karolin7的博客
11-19 376
vue代码使用swiper.js时，不使用router！ 下载 swiper.js文件 下载完成，引入到HTML 方法一:在vue data 里面定义一个对象用来初始化swiper， 在method里面定义一个函数 在mounted里面调用它； data：{ swiper：{} }, mounted:function(){ this.swiperTo(); }, methods:{ swiperTo:function(){ this.swipe
vue2路由 router-link
09-21
router-link是Vue2中的一个组件，用于在页面中创建链接并实现路由导航。它是基于Vue Router实现的，可以通过设置不同的属性来配置链接的行为和样式。 router-link的tag属性用于指定渲染为哪种HTML标签，默认为a标签...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值