关于VUE Router不跳转原因

最新推荐文章于 2024-07-03 21:45:00 发布

isbluezzz

最新推荐文章于 2024-07-03 21:45:00 发布

阅读量3.9k

点赞数 6

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_52721945/article/details/126848492

版权

本文分享了一个关于Vue Router配置中常见的错误，即误将'routers'写为'routes'导致页面无法正常跳转的问题。作者通过纠正这个关键字，成功解决了页面显示问题，并提醒读者Vue Router对关键字的敏感性，强调了正确使用内置关键字的重要性。

摘要由CSDN通过智能技术生成

关于VUE Router不跳转原因之一

以前也犯过的一个原因现在分享出来给大家
页面显示
app.vue页面的代码
- 总结

以前也犯过的一个原因现在分享出来给大家

在这里插入图片描述

											上面的routers改成routes即可

修改后
在这里插入图片描述

页面显示

在这里插入图片描述

app.vue页面的代码

在这里插入图片描述

总结

router对关键字是很注重的不能随意取它会有内置的一些关键字对不上关键字是识别不了的（小白个人理解）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

isbluezzz

关注关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
关于VUE Router不跳转原因

router对关键字是很注重的不能随意取它会有内置的一些关键字对不上关键字是识别不了的（小白个人理解）
复制链接

扫一扫

vue router 跳转后回到顶部的实例

10-18

今天小编就为大家分享一篇vue router 跳转后回到顶部的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue 页面跳转不用router-link的实现代码

08-27

但是，在某些情况下，我们可能不想使用 router-link 来实现页面跳转。这时，我们可以使用其他方法来实现页面跳转。下面是一个使用 Vue 实现页面跳转不用 router-link 的示例代码：首先，在模板中，我们可以使用 ...

3 条评论您还未登录，请先登录后发表或查看评论

解决vue+router路由跳转不起作用的一项原因

11-20

如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:’history’, 原因如下补充知识：vue-router配置后地址栏输入跳转不

【Vue】Router路由无法跳转问题整理

Sheldon74的博客

09-08

1万+

Vue Router路由无效或异常等问题整理

【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧

最新发布

工作的日常记录和平凡的生活分享

07-03

1663

路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中，路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式（path）、视图组件（component）以及一些高级配置，如命名视图、重定向、别名等。 - 路由模式：路由的路径模式定义了URL的路径与组件的映射关系。例如，`{ path: '/user/:id', component: User }` 表示当URL匹配到 `/user/:id` 时，将渲染 `User` 组件，其中 `:id` 是一个动态参数。 - 组件映

vue——router更改路由地址，但是页面不能跳转

yehaocheng520的博客

07-28

7959

在做电商项目时，筛选标签时，需要路由发生变化，但是当前的页面商品列表还需要局部刷新。如果更改路由后，页面跳转，则是全局刷新，局部刷新才能够满足用户需求。则此时要做的就是：更改路由地址，但是页面不能跳转。 this.$router.push或者this.$router.replace就是实现路由改变页面跳转的方法： this.$router.push({ path:'index.html', query:{ id:3, tag:18 } }) 如果仅仅是为了让路由发生变化的话，可以将上面中

解决vue项目中路由跳转不生效

jinkunqingning的博客

01-22

1622

初学vue，自己新建了一个项目，但是很奇怪的是，配置明明都是正确的，但是点击按钮跳转不生效。然后就是查看你的首页是不是直接写到app.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

vue-router跳转时打开新页面的两种方法

10-16

主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

vue中 vue-router不跳转

TO_Web的博客

12-10

2612

router-view 点击不跳转路由配置 { path: '/', name: 'Navcation', component: () => import(/* webpackChunkName: "Navcation" */ '../components/Navcation') }, { path: '/survey', name: 'survey', component: () => import(/* webpackChunkNa

Vue路由导航跳转中页面无法实现跳转

weixin_43651017的博客

10-07

5419

vue路由导航中出现页面无法跳转的情况

vue+router路由跳转不起作用的一项原因

热门推荐

oXiangZuoZuo12345的博客

08-01

2万+

Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Registe...

vue路由无法跳转，只刷新页面的问题

一如年少丶的博客

04-27

1421

问题在我输入正确的信息登陆之后，Vue路由不跳转到首页解决后来发现是form表单的默认提交事件导致的，我们来使用click.prevent阻止form表单的默认提交事件 <div class="form-group"> <button @click.prevent="submitForm('loginform')" class="btn btn-default">L...

vue-router模式为history的项目打包发布后不能通过地址栏里的地址进行路由跳转

博客

03-13

7806

项目打包发布后不能通过地址栏里的地址进行路由跳转,地址栏里回车访问就直接404 本项目使用nginx发布，所以这里只有nginx的配置方式。修改nginx的配置文件 server { listen 8080; server_name localhost; #charset koi8-r; #access_log ...

vue点击事件触发后页面不跳转

weixin_66954164的博客

05-12

984

点击事件触发页面不跳转

解决vue路由跳转不能拿到最新的路径

qq_43505774的博客

03-20

563

this.$nextTick(()=>{ this.tabChange({ name: this.$route.meta.title, url: this.$route.path, active: sessionStorage.getItem('active') }) })

Vue路由跳转了但是页面不跳转[解决办法]

weixin_45912825的博客

06-06

1万+

Vue路由跳转了但是页面不跳转[解决办法]为什么会出现这种情况解决办法为什么会出现这种情况最近开始学习Vue的组件化开发，想要进行页面跳转就设置了路由： const routes=[ { path:'/', component:home }, { path: '/login', component:login } ] 但是无论路由怎么跳转页面都只在home组件上. 这是因为路由页面需要显示在router-

解决vue router中连续点击跳转报错的问题

HHYZBC的博客

08-25

570

其原因是在连续点击跳转连接后，其返回的是一个promise对象，该对象并没有成功和失败的回调所导致的。解决问题是在router文件夹中重写push和replace方法即可。

vue-router路由导航url已改变，但未跳转至对应组件

mmsmsmm的博客

08-25

3626

vue-router路由导航url已改变，但未跳转至对应组件

vue router 页面跳转

07-16

在Vue中，你可以使用Vue Router来实现页面跳转。下面是一个简单的示例：首先，你需要安装Vue Router。在命令行中运行以下命令： ``` npm install vue-router ``` 然后，在你的Vue应用程序的入口文件（通常是main.js）中，导入Vue Router，并将其作为Vue实例的插件使用： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，你需要定义你的路由。在同一个文件中，创建一个新的Vue Router实例，并配置你的路由规则。例如： ```javascript const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] const router = new VueRouter({ routes }) ``` 在这个例子中，我们定义了三个路由：`/`，`/about`和`/contact`。对应的组件分别是Home、About和Contact。最后，在你的Vue实例中，将路由器添加到Vue实例的配置中： ```javascript new Vue({ router, render: h => h(App) }).$mount('#app') ``` 现在，你可以在你的应用程序中使用`<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的官方文档以获取更多详细信息。