【Vue项目】router-link跳转失败404

心晴i

已于 2023-10-11 17:41:38 修改

阅读量1.7k

点赞数 3

分类专栏： VUE笔记文章标签： java vue.js

于 2023-02-09 19:48:59 首次发布

本文链接：https://blog.csdn.net/z5675678/article/details/128959128

版权

VUE笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天参考一个案例使用<router-link>进行跳转且传值过去时，未成功跳转且报404找不到页面，后来发现还需要在router里面配置下路由

如图:

当前页面路径:

想要跳转到该路径:

检查:

检查router的js文件是否配置好了这两个路由

我的因为还需要带上个参数,所以在后面接上了 :id 来传值 ,我这块因为是用params传参，所以另一个页面想要拿取这个值,

可以用: this.$route.params.id来取值，基本上配置好router就可以带值跳转了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

心晴i

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue项目】router-link跳转失败404

处理进行跳转且传值过去时，未成功跳转且报404找不到页面问题
复制链接

扫一扫

专栏目录

vue -＞ router动态路由和匹配404

Un_YUI的博客

02-04

794

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="./vue.j

简单记录一次vue访问路由地址页面404问题

Kingyolo的博客

10-01

1389

背景用了vue的router生成路由路径，页面上点击的链接均通过router-link跳转页面本地：npm run serve启动项目，访问location:8080可以访问，点击页面上链接，能正常跳转，且直接输入location:8080/{路由地址}也能正常访问服务器：由npm run build 打包项目，放到nginx环境下，访问绑定的域名能正常访问，点击页面链接能正常跳转，但是！直接输入域名/{路由地址}缺直接报404，排查路由均一切正常。解决排查了路由和重定向均一切正.

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

vue-router+webpack部署nginx刷新404问题与解决方案

ty0415的专栏

01-26

878

.问题：使用Vue.js框架，利用vue-route结合webpack编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象。 2.原因：刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录...

Vue 路由的使用及解决 router-link 点击事件无效问题

最新发布

My_wife_QBL的博客

07-05

522

在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。

RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转

weixin_48823116的博客

07-05

2164

RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转

vue vuerouter错误页404pageNotFound

虾米大王的学习历程

08-31

355

【代码】vue vuerouter错误页404pageNotFound。

vue router-link添加点击事件无效

HELLO WORLD

05-27

3092

本文知识点比较简单，只要面向新人解惑，vue高手请忽略。在vue实际开发中可能会遇到比较常见的问题之一：router-link添加点击事件无效。这是为什么呢？请看下文

router-link不识别

weixin_42600128的博客

02-16

817

router-link是Vue.js中的一个组件，它用于实现页面跳转和路由功能。如果你的代码中出现了“router-link不识别”的错误，可能是以下原因之一：你没有正确引入Vue.js的router模块。在使用router-link之前，需要在代码中引入Vue.js的router模块，否则Vue.js无法识别router-link组件。你的代码中存在拼写错误。请检查代码中是否有拼写错误，...

详谈vue中router-link和传统a链接的区别

10-15

总的来说，`<router-link>` 是Vue Router为单页应用设计的智能导航组件，它提供了更好的用户体验、模式兼容性和性能优化，而传统的`<a>` 标签则更适合于简单的页面间跳转。在开发Vue应用时，合理使用`<router-link>`...

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

08-27

Vue 页面跳转不用 router-link 的实现代码本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。首先， Vue router-link 是 Vue.js...

解决Vue router-link绑定事件不生效的问题

10-15

此外，在Vue项目的入口文件（如main.js）中，应当正确地引入VueRouter实例。Vue.use(Router)这行代码是必须的，因为它会调用传入的VueRouter实例的install方法，从而将VueRouter实例安装为Vue的插件。需要注意的是，...

详解vue-router 2.0 常用基础知识点之router-link

12-09

在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...

vue router-link传参以及参数的使用实例

08-28

<router-link :to="{path:'/test', query: {name: id}}">跳转</router-link> ``` 在这个例子中，`id`是变量，当你点击链接时，会被替换为实际值。在目标组件中，你可以通过`this.$route.query`访问这些参数，例如： ...

router-link跳转失败（Vue router命名路由）

whtli的博客

01-21

7854

Vue router命名路由，router-link跳转失败解决方法

【Vue项目练习】router-link跳转失败原因

xptxhx的博客

11-10

3572

发现自己使用router-link想要传到/detail路径的时候需要带个params参数总是自动跳转到我项目的首页

vue-router 4.0 动态路由会跳转到 404 页面的问题

纯爱枫若情的博客

07-10

7300

当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。

vue页面跳转报404

weixin_40444253的博客

06-06

835

vue页面跳转报404

Vue 项目布署后，刷新页面（或跳转页面）出现 404 解决办法

在人间负债^

08-23

5784

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中，因此对于服务端来说，即使没有配置location，也不会返回404错误。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们可以发现，变的始终是内容，而容器还是那个容器。

本地link跳转ok 部署后nginx报错跳404页面的原因及解决办法

hzxOnlineOk的博客

08-09

1755

a标签的target属性_self ：默认。在相同的框架中打开被链接文档。_blank: 新开一个窗口打开文档_parent : 在父框架集中打开被链接文档。_top:在整个窗口中打开被链接文档。

vue router-link跳转链接

07-28

Vue的`router-link`组件用于在Vue Router中跳转链接。要使用`router-link`，首先需要确保已经安装并配置了Vue Router。在Vue模板中，可以像下面这样使用`router-link`： ```html <router-link to="/home">Home</router-link> ``` 其中，`to`属性指定要跳转的路径，可以是一个字符串，也可以是一个JavaScript表达式。可以通过添加其他属性来自定义`router-link`的行为和样式。例如： ```html <router-link to="/about" active-class="active" exact> About </router-link> ``` 在这个例子中，`active-class`指定了当链接处于活动状态时应用的CSS类名，`exact`属性指定了只有在路径完全匹配时才应用活动状态。除了使用`to`属性，还可以使用命名路由来指定跳转路径。例如： ```html <router-link :to="{ name: 'user', params: { userId: 123 }}">User Profile</router-link> ``` 在这个例子中，通过`name`属性指定了路由名称，并通过`params`属性传递了路由参数。更多关于Vue Router和`router-link`的详细信息，请参考官方文档：https://router.vuejs.org/zh/