#vue# 【三】 如何通过路由实现一个页面跳转另一个页面？

最新推荐文章于 2024-07-17 20:15:37 发布
最新推荐文章于 2024-07-17 20:15:37 发布
阅读量685 收藏
点赞数
分类专栏： vue专栏 文章标签： vue.js javascript 大前端 es6 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/117913556
版权

#vue# 如何通过路由实现一个页面跳转另一个页面？

比如首页里面有一个版块，
是点击就跳转到指定页面（library）的
那这个时候，我们只需要在index.js文件里，进行注册绑定
在这里插入图片描述

在这里插入图片描述
path:路径,就是跳转的路径，一定要加/
在这里插入图片描述

然后，在页面加入一个跳转到library的路由，如下图
在这里插入图片描述

最后，点击一下，就可以跳转了
在浏览器里面就是呈现以下，如果要手动输入网址，一定不要忘记加#/
在这里插入图片描述

Miraitowa_chole
关注
专栏目录
【Vue常见问题】三级联动的路由跳转和传递参数
XIANTAO_CHENG的博客
06-10 475
【Vue常见问题】三级联动的路由跳转和传递参数
Vue项目中常见问题(15)三级联动组件的路由跳转与传参
qq_46368050的博客
05-15 1702
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 方法一:声明式导航router-link来替换a标签跳转(不推荐) 1. 点击后确实能够跳转到/search页面 2. 但是当你鼠标进入三级联动,上下滑动的时候,会出现卡顿现象! 方法二：编程式导航(一般方法) 1.绑定点击事件 2.给点击事件一个方法 3.点击后确实能够跳转到/search页面,而且也没有了卡顿的现象 4...
通过路由跳转到一个全新的页面
生如夏花S的博客
01-17 3003
1.  在app.vue输入  <router-view></router-view> <template> <div id="app"> <router-view></router-view> </div> </template> &l
Vue3 快速入门 (四) : 使用路由实现页面跳转
最新发布
朱豪凯的博客
07-17 3442
介绍在Vue3中，如何使用路由实现页面的跳转
vue 三种路由跳转方式
weixin_48181168的博客
07-09 515
方式一: this.$router.push('/order/zh'); 方式二: this.$router.push({ name:'zh-order',//name这里指路由的名称 query:{ //这里是传递的参数 } }) 第三种方式: this.$router.push({ path: "/order/zh", //path是路径 params: { //这里是传递的参数 } }); 方式二和.
Vue项目实战(五)：三级联动的路由跳转
summer_cloudy的博客
03-30 898
【代码】Vue项目实战(五)：三级联动的路由跳转。
解决vue多个路由共用一个页面的问题
08-27
在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 Vue 多个路由共用一个页面的问题，具有很...
vue通过路由实现页面刷新的方法
08-28
Vue 通过路由实现页面刷新的方法 在 Vue 项目中，页面刷新是一个常见的问题， especially when dealing with complex applications. 在本文中，我们将探讨通过路由实现页面刷新的方法，解决购物车页面跳转到详情页...
vue从一个页面跳转到另一个页面并携带参数的解决方法
10-16
下面我们将详细讨论如何在Vue中从一个页面跳转到另一个页面并携带参数。 1. **使用`this.$router.push()`进行页面跳转** 要在Vue组件中实现页面跳转，可以使用`this.$router.push()`方法。这个方法接受一个对象，...
vue 实现路由跳转时更改页面title
10-16
在Vue应用中实现路由跳转时更改页面标题是一项常见的需求，它能够改善用户体验，让浏览器的标签页标题与当前用户访问的页面内容保持一致。本篇将详细介绍如何在Vue项目中，利用Vue Router来实现路由跳转时自动更改...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
- 在`publish-center.vue`组件中，你看到的`v-for`循环遍历`$router.options.routes`，这是Vue Router中存储所有路由的数组，每个元素代表一个路由配置。 - `v-if`条件判断用于决定是否渲染子菜单或菜单项，这通常...
vue三级路由
06-25
vue如何使用二级路由和三级路由,以及路由的引用,路由的抽离
Vue 跨页面#锚链接跳转
sunshineTing2的博客
03-18 297
从home页面 -链接- list页面 第一步：在home页面用a标签设置锚链接 <!-- home.vue--> <a href="/list#Scientists">跳去列表页 科学家</a> <a href="/list#Innovators">跳去列表页 创新者</a> 第二步：在list页面设置id属性 <!-- list.vue--> <p id="Scientists"> 列表页科学家内容
react路由跳转 单页面开发，地址栏拼接
mmyy_的博客
03-28 1291
前提：开发一个需求 数据看板页面有一个对比功能，当点击对比功能需要将当前页面的数据带到第二个页面进行请求并渲染，同时返回时会之前页面的数据不丢失。 由于我们的系统是单页面的，当页面跳转之后，当前页面的状态就会被清空，所有再次返回的时候数据全部丢失了，此时的想法就是将需要保留的参数在change的时候拼接到地址栏上，当页面跳转之后再次返回，history的push和goBack是不会改变路由地址的，所以当前页面的地址栏拼接参数之后跳转到其他页面再返回时参数不会丢失，这样可以从地址栏中获取参数进行页面渲染，这
路由传参 点击查看携带参数跳转到另一个页面
xzbqd的博客
11-29 490
路由传参 点击查看携带参数跳转到另一个页面
vue router 的路由传参 params 和 query 的 区别
weixin_30588675的博客
09-05 2228
1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 &...
Vue路由自动添加#的问题
LeBRON12234的博客
01-31 3115
在使用VueRouter时，配置了几个路由规则 尝试在浏览器中输入路由地址（/order,/person等）来测试Vue组件是否跳转成功，发现浏览器总是自动在最后添加#/home，导致跳转失败。 将路由模式设置为history，问题解决。 ...
2024年最新Vue路由跳转的五种方式_vue路由跳转方式，面试官vo
2401_84447328的博客
05-15 1105
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】可追溯编程式。
解决vue项目访问地址自动添加#号问题
Feb_ruary的博客
07-25 7201
新建一个vue项目，访问地址url后自动添加#号，很不美观。
vue 路由跳转打开另一个页面
05-20
跳转到另一个页面 ``` 其中，`to` 属性指定了要跳转的页面路径。 如果不想使用 `router-link` 组件，也可以通过编程式导航来实现跳转。在 Vue 组件中，可以通过 `$router` 对象来访问路由实例，并调用其 `push` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值