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

最新推荐文章于 2023-05-18 15:10:32 发布
原创 最新推荐文章于 2023-05-18 15:10:32 发布 · 683 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #router

本文介绍了如何在Vue中使用v-router实现button等非a标签的路由跳转，包括replace方法、前进后退操作（back/forward）以及go方法的使用，以及如何通过参数控制导航步数。

要点：

 

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

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

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

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

 

 

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

 

 

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

这样就行了

 

 而这边的go方法

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

总结
：

 

 

【VUE声明式导航跳转如何传参】router-link查询参数传参&动态路由传参
qiaomm的个人博客
08-25 1389
提示：这里的跳转如何传参？指 一个页面向另一个地址页面跳转时，如何传值？比如下面的使用场景，热搜榜，是很常见的使用场景之一。以上场景非常常见，如果还是不明白，可以这样理解：（1）点击【首页】中的“细水长流者的博客”；（2）对【搜索页】进行传值（因为搜索页需要知道点击的是哪个链接）；（3）【搜索页】接收参数值，进行前端渲染。简单理解：首页向搜索页传值，搜索页接收首页传过来的参数值！！！。接下来，本文主要介绍的两种跳转传参方式——查询参数传参和动态路由传参。
【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
weixin_72979483的博客
09-07 2627
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router
前端路由实现
m0_63836635的博客
09-02 2299
原生js实现前端路由以及Vue路由
vue不在一个路由配置中，怎么实现页面跳转？
stay hungry, stay foolish
05-18 1771
如果两个页面不在同一个路由配置中，可以使用HTML中的超链接标签，或者使用JavaScript中的location对象的方法进行页面跳转。
(VUE2 STEP3)用router-link替代a herf
weixin_45553150的博客
04-28 300
在vue2.0中，原来的v-link指令已经被组件替代了 组件支持用户在具有路由功能的应用中点击导航。 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。 其实我目前也不太明白为什么这么改?有什么好处?没办法,技术一直是演进的.过1\2年又会有新的东西出来,又得重新学.这类技术我也懒的深究,...
不借助router-link实现路由跳转的编程式路由导航
weilaaer的博客
10-23 293
1.作用:不借助 实现路由跳转，让路由跳转更加灵活。
Vue3——子路由路径时仅渲染子路由页面不渲染父路由页面
我是我
06-18 4146
1.使用场景 当我们在配置路由结构时，有父子关系时，会这样设计路由 { name: 'testA', path: '/testa', component:() => import('../views/test/testA.vue'), children: [ { name: 'testB', path: 'testb', component: ()=>import('../views/test/tes
vue路由 遍历生成复数router-link的例子
10-16
在本篇关于Vue路由的文章中，我们了解到在使用Vue CLI创建单页面应用（SPA）时，经常会需要顶部导航栏来控制下方内容栏的页面内切换，这就需要用到Vue-router，它是Vue.js的一个插件，用于构建SPA。 首先，要使用...
详谈vue中router-link和传统a链接的区别
10-15
`<router-link>` 是Vue Router提供的一个组件，用于在应用中实现平滑的导航。下面将详细探讨这两者的差异。 首先，`<router-link>` 在HTML5 history 模式和hash模式下表现一致，这意味着不论你选择哪种路由模式，`...
Vue 页面跳转不用router-link
Oliver的博客
04-11 9635
1、给父页面跳转的地方设置事件 //原来的页面上展示的信息 &lt;div v-if="!addShow" class="function"&gt; &lt;el-row&gt; &lt;template slot-scope="scope"&gt; &lt;el-button type="success" size="mini&quo
Vue 页面跳转不用router-link的实现代码
08-27
主要介绍了 Vue 页面跳转不用router-link的实现代码，文中给大家介绍了vue router-link跳转传值示例,需要的朋友可以参考下
前端应用_Vue_vue-router 用router-link代替a 标签，设置默认的路由
上海 彭彭
08-17 3841
之前 用 a标签 ，每次都需要在href 里面添加 #， 用router-link 可以避免。 <router-link to='/login' tag="span">登录</router-link> <router-link to='/registe' tag="span">注册</router-link> 我们想设置默认路由显示指定的...
vue非路由组件使用
weixin_52113974的博客
09-11 353
非路由组件如果使用
vue的学习笔记：编程式路由导航（不借助＜router-link＞ 实现路由跳转，让路由跳转更加灵活）
xinbaiyu的博客
09-13 285
编程式路由导航 作用：不借助<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()
手撕Vue-Router原理-实现自己的路由插件
weixin_43213137的博客
07-13 388
1.路由总结 基础知识点是必须掌握的，无论在业务开发过程中还是准备面试复习，都需要扎实掌握。 手写路由插件-基础版 1.初始化一个vue项目 新建一个vuerouter文件夹，在文件夹中创建一个index.js文件，我们的vue插件就写在index中。 2.VueRouter的使用方式 vue-router的基本使用方式： import Router from ‘vue-router’ Vue.use(Router) export default new Router({ mode: 'his
支持外部链接跳转的 Vue Router 扩展实现
素履独行 | 元培的个人博客
07-13 4903
众所周知，Vue-Router 是 Vue 中重要的插件之一，特别是在当下流行的 单页面应用/SPA 中，这种感觉会越来越明显。此时，路由的作用就是根据 来决定要显示什么内容。诚然，页面这个概念在工程/模块中依然存在，可当你开始关注最终发布的产物时，你会发现本质上它只有一个页面。无论你选择 或者是 模式的路由，它都像是在同一张纸上反复写写画画，让你看起来觉得它有很多个不同的页面。回顾早期的前端项目，它往往会有多个不同的页面组成，我们是通过一个个的超链接来实现不同页面间的跳转。如今，这一切都已一去不复返
Vue学习：编程式路由导航（不借助router-link进行路由跳转）
weixin_47295886的博客
03-10 663
使用router-link标签进行路由跳转--》最终是转换成a标签，但是有些时候跳转不是a标签 是按钮也可以。使用$router进行操作--替换router-link m参数是上面传递。有两个按钮：push查看 replace查看。
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1325
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
swiper在vue的不使用router的使用方法
karolin7的博客
11-19 447
vue代码使用swiper.js时，不使用router！ 下载 swiper.js文件 下载完成，引入到HTML 方法一:在vue data 里面定义一个对象用来初始化swiper， 在method里面定义一个函数 在mounted里面调用它； data：{ swiper：{} }, mounted:function(){ this.swiperTo(); }, methods:{ swiperTo:function(){ this.swipe
vue3 router-link绑定router-view
最新发布
02-26
### Vue 3 中 `router-link` 绑定 `router-view` 的用法 在 Vue 3 中，为了实现页面之间的导航并展示不同的视图内容，可以使用 `vue-router` 提供的 `<router-link>` 和 `<router-view>` 这两个核心组件。 #### 创建路由配置文件 首先，在项目中安装好 `vue-router` 后，需创建一个路由配置文件来定义应用中的不同路径及其对应的组件。这一步骤确保了当访问特定 URL 路径时能够加载相应的组件[^1]。 ```javascript // src/router/index.js 或者其他合适位置 import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ] const router = createRouter({ history: createWebHistory(), routes }) export default router; ``` #### 设置主应用程序结构 接着，在项目的入口 HTML 文件或单文件组件内设置基础的应用程序布局，其中包含了用于触发导航链接的 `<router-link>` 标签和显示匹配组件的地方即 `<router-view>` 标签[^4]。 ```html <template> <div id="app"> <header> <!-- 导航栏 --> <nav> <ul> <li><router-link :to="{name:'Home'}">首页</router-link></li> <li><router-link :to="{name:'About'}">关于我们</router-link></li> </ul> </nav> </header> <!-- 页面主体区域 --> <main> <router-view /> </main> </div> </template> ``` 上述代码片段展示了如何利用 `router-link` 来构建导航菜单，并通过点击这些链接改变当前显示的内容区(`router-view`)所呈现的具体页面[^2]。 #### 关联路由器实例至根组件 最后，记得把新建立好的路由器对象关联到整个 Vue 应用上，通常是在 main.js (或者类似的启动脚本)里完成此操作： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就完成了基于 Vue 3 的简单路由系统的搭建过程，实现了 `router-link` 对应于各个页面间的跳转逻辑，而 `router-view` 则负责动态渲染对应组件的内容[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值