Vue Router不跳转

最新推荐文章于 2023-09-08 18:33:42 发布
最新推荐文章于 2023-09-08 18:33:42 发布
阅读量8k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： js vue 文章标签： vue vueRouter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/docwangsir/article/details/95164403
博主在开发中找路由不跳转的bug，发现是将主页面覆盖App.vue文件且弄乱格式，未使用<router-view/>标签导致。建议不要改动App.vue文件，可重写vue文件并将默认路由指向主页面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我找了很久的bug，又对照以前的项目老看，基本没有错，但是为什么不跳转，后来我发现我干了一件傻事.....

我竟然把要写的主页面覆盖了App.vue这个文件，并且把原格式弄得稀烂。所以致使我整个router都不对，这个主要的原因是因为我根本没有用到<router-view/>这个标签，当然不跳转了。。。。。。。

所以建议：

App.vue这个文件一定不要动，你可以重写一个vue文件然后把默认路由'/'指向你的主页面，但是别瞎重弄app.vue文件，他是祖宗咱别管他了.....

vue路由传递参数（一）（不跳转页面传递参数）详解
jieweiwujie的博客
09-06 2691
此用法主要适用于单页面中引入一个组件，组件需要根据不同的参数展示不同的数据，不用跳转页面，渲染速度快，达到消耗少，高内聚，低耦合的效果
解决vue+router路由跳转不起作用的一项原因
11-20
如下所示： Vue.use(Router) export default new Router({ mode:&#39;history&#39;, routes: [ { path: &#39;/&#39;, component: Login }, { path: &#39;/login&#39;, component: Login }, { path: &#39;/register&#39;,component: Register}, {path: &#39;/*&#39;, component: NotFound}, ] }) 记得要写上 mode:’history’, 原因如下 补充知识：vue-router配置后地址栏输入跳转不
vue——router更改路由地址，但是页面不能跳转
yehaocheng520的博客
07-28 9126
在做电商项目时，筛选标签时，需要路由发生变化，但是当前的页面商品列表还需要局部刷新。 如果更改路由后，页面跳转，则是全局刷新，局部刷新才能够满足用户需求。 则此时要做的就是：更改路由地址，但是页面不能跳转。 this.$router.push或者this.$router.replace就是实现路由改变页面跳转的方法： this.$router.push({ path:'index.html', query:{ id:3, tag:18 } }) 如果仅仅是为了让路由发生变化的话，可以将上面中
【Vue】Router路由无法跳转问题整理
最新发布
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
vue跳转同一路由页面不跳转
weixin_51299408的博客
03-24 2150
跳转同一路由，路由改变了，页面不刷新。 路由改变页面不刷新
vue不再支持路由跳转params传值
weixin_43904993的博客
02-27 331
具体参考。
vue router 跳转后回到顶部的实例
10-18
针对Vue Router跳转后返回页面顶部的需求，我们需要在main.js中添加一段代码来实现这个功能。 具体实现如下： ```javascript // 在main.js中添加代码以实现在路由跳转后页面返回顶部 router.afterEach((to, from, ...
Vue 页面跳转不用router-link的实现代码
08-27
但是，在某些情况下，我们可能不想使用 router-link 来实现页面跳转。这时，我们可以使用其他方法来实现页面跳转。 下面是一个使用 Vue 实现页面跳转不用 router-link 的示例代码： 首先，在模板中，我们可以使用 ...
vue-router跳转时打开新页面的两种方法
10-16
下面，我们将详细探讨使用vue-router跳转到新页面的两种常用方法。 首先，要理解vue-router提供的跳转方式，我们可以使用<router-link>组件或者编程式导航。 第一种方法是通过<router-link>标签配合target="_blank...
vue3改变路由不跳转案例
你怎么也喜欢嘴巴嘟嘟
09-03 2050
当我们的需求是 界面里面使用的tab切换，每次点击tab切换我们向后端发送一个参数，但是内部我们可以做到，这样的话路由不会自动修改，我们需要使用 router.replace({ name: "路径", query: { id: id, }, }); 官网解释为：跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 ...
久等了，提高开发效率的 vue 技巧来了
MrXu的博客
10-09 970
最近俩月正好用 vue 做了一个大数据的项目，积累了很多心得。今天终于有机会分享出来了。组件（component）的使用vue 提供的模块化无疑是提高开发效率的神器，而且...
vue中全局socket及路由不跳转带参数刷新页面和trycatch事务管理
weixin_43795840的博客
12-16 1006
一.使用vue出现的bug和已经实现的功能 1.反复在公共组件中调用同一个component组件并且需要传值刷新时（就是路由地址不变，根据不同传值刷新） （1）引入一个utils.js内容如下 import Vue from 'vue' export default new Vue （2）在需要跳转的页面和公共页面引入utils import utils from '../../../Base/...
vue跳转方式及传参 (包括打开新窗口)
rail1988的博客
11-20 982
本文实例讲述了vue跳转方式（打开新页面）及传参操作。分享给大家供大家参考，具体如下： 1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'
Vue中不同页面之间如何传递参数？
Alan_Walker688的博客
02-25 2410
Vue中不同页面之间传递参数的解决方法
Vue路由导航跳转中页面无法实现跳转
weixin_43651017的博客
10-07 5754
vue路由导航中出现页面无法跳转的情况
vue配置路由，路由不跳转，页面不显示
热门推荐
qq_41988113的博客
04-26 1万+
问题1：路由不跳转 遇到这个问题第一时间去检查自己的代码 （1）在router index.js中 ①查看这两个routes是否一致 const routes:[ ... ] const router = new VueRouter({ routes, }) ②配置中的component是否多加了s { path: '/home', component: Home }, ③导入的文件路径是否正确 const Home = () => import('../vi
vue3-路由能跳转，页面却不跳转
Huanghuali_的博客
01-16 1万+
遇到一个问题整了一天虽然也看出是啥问题，然后我换了种访问路由的方法 就是点击主页超链接还有用户模块超链接，路由改变了，但是主页的内容都不变。（忽略我的页面设计，纯属练手乱配色的） router的路由配置index.js（这边是没问题的） import { createRouter, createWebHistory } from 'vue-router' import Home from '../components/Home.vue' import User from '../components/U
解决vue-router跳转不起作用
Felicity的博客
05-13 1万+
router 这么写： export default new Router({ mode: 'history', routes: [ { path: '/homePage', name: 'HomePage', component: HomePage }, { path: '/topUpPage', n...
vue地址路由改变，但页面不跳转
cs_zhao18的博客
12-10 1万+
问题：开始页面改成了./views/Home.vue，可以成功打开，但链接全部失效，地址路由改变，页面不跳转。 我的解决方法： 一、main.js文件，程序入口页面恢复为默认的App.vue 二、App.vue里其他代码删了，添加这三行代码 <template> <router-view/> </template> 三、然后运行，发现页面直接跳转到Home，并且链接跳转功能恢复 总结：应该是我修改后，缺少相关解析，导致页面锁死在了App.vue。.
vue router 页面跳转
07-16
在Vue中，你可以使用Vue Router来实现页面跳转。下面是一个简单的示例： 首先，你需要安装Vue Router。在命令行中运行以下命令： ``` npm install vue-router ``` 然后，在你的Vue应用程序的入口文件（通常是main.js）中，导入Vue Router，并将其作为Vue实例的插件使用： ```javascript import Vue from &#39;vue&#39; import VueRouter from &#39;vue-router&#39; Vue.use(VueRouter) ``` 接下来，你需要定义你的路由。在同一个文件中，创建一个新的Vue Router实例，并配置你的路由规则。例如： ```javascript const routes = [ { path: &#39;/&#39;, component: Home }, { path: &#39;/about&#39;, component: About }, { path: &#39;/contact&#39;, component: Contact } ] const router = new VueRouter({ routes }) ``` 在这个例子中，我们定义了三个路由：`/`，`/about`和`/contact`。对应的组件分别是Home、About和Contact。 最后，在你的Vue实例中，将路由器添加到Vue实例的配置中： ```javascript new Vue({ router, render: h => h(App) }).$mount(&#39;#app&#39;) ``` 现在，你可以在你的应用程序中使用`<router-link>`组件来进行页面跳转。例如，在导航栏中添加以下代码： ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> ``` 当用户点击链接时，Vue Router会根据配置的路由规则自动导航到相应的组件。 当然，这只是Vue Router的基本用法。你还可以使用更多高级功能，如动态路由、嵌套路由、路由守卫等。你可以查阅Vue Router的官方文档以获取更多详细信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值