vue路由url不存在则跳转指定页面

最新推荐文章于 2024-05-14 22:06:20 发布
最新推荐文章于 2024-05-14 22:06:20 发布
阅读量4.9k 收藏 8
点赞数 2
分类专栏： router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EnidChann/article/details/107378692
版权
本文介绍了两种处理Vue路由不存在的情况，包括使用路由守卫进行拦截判断以及直接设置路由重定向，确保用户能被引导至指定页面。
摘要由CSDN通过智能技术生成
  • 方法1：路由守卫拦截判断
router.beforeEach((to, from, next) => {
   
	if (to.matched.length === 0) {
     // 如果未匹配到路由
	   from.
最低0.47元/天 解锁文章
Enidchan_
关注
专栏目录
实现 Vue 路由不存在时跳转到当前页面的技术指南
m0_73734137的博客
01-06 936
在Vue中，当用户访问一个不存在的路由时，通常会显示一个404页面。接下来，我们需要在路由配置中添加一个通配符路由，以便在用户访问不存在的路由时能够跳转回当前页面。在上面的代码中，我们定义了两个路由：一个是根路径'/'对应Home组件，另一个是'/about'对应About组件。接下来，我们需要在Vue实例中使用这个路由。在上面的代码中，我们使用通配符'*'来匹配所有不存在的路由，并将其重定向到根路径'/'。现在，当用户访问不存在的路由时，他们将会被重定向到当前页面，而不是显示一个错误页面。
Vue访问不存在的路由，重定向跳转
轻风细雨_林木木
01-06 2779
Vue访问不存在的路由，重定向跳转 src/router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 重加载push方法，解决报错 const originalPush = Router.prototype.push Router.prototype.push = function push (location) { return originalPush.call(this, lo
【Vue】当访问的路由不存在则自动跳转404 notFound实现
weixin_44460896的博客
09-21 2195
vue404
vue脚手架启动成功后，点击跳转链接，报无法找到页面。
jxphuijing的博客
03-19 1466
这两天刚进公司，拉取公司项目下来，安装完依赖，却不能正常跳转。 就像这样， 然后点击就这样，，把我弄懵了， 因为是小白，所以在网上找了一些资料，发现是congig目录下的index.js文件，是和链接地址有冲突的， 一般都是0.0.0.0和localhost是通用的，但是有的机器可能就是不能正常显示，所以，改为localhost以后，重启脚手架。 ...
在Vue3项目中，输入没有路由对应的路径时候，怎么跳转到404或者首页
百度一下 猎人社区
04-29 4035
在一个Vue3应用中，通常情况下，我们使用Vue Router来处理路由。在Vue Router中，当用户请求输入一个不正确的URL路径时，没有路由与其相匹配，这时候会返回一个默认的404页面或者重定向到首页。因此，本文将通过以下几个方面来讨论如何在Vue3项目中实现这一功能。
解决vue 路由变化页面数据不刷新的问题
08-27
本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。 首先，我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数...
vue 解决路由只变化参数页面组件不更新问题
10-16
在Vue.js应用中，路由是页面之间导航的关键组成部分。当你使用Vue Router进行页面导航时，通常情况下，当路由路径发生变化时，对应的组件也会随之更新。然而，在某些情况下，如果路由只变化了查询参数（即URL中`?`...
vue3输入无效路由跳转到指定error页面
Yajyaj123的博客
09-10 1615
vue3输入无效路由跳转到指定error页面
Vue配合express解决前端路由找不到的问题
weixin_54607676的博客
05-22 723
下载connect-history-api-fallback依赖 引入改依赖 const history = reuqire('connect-history-api-fallback') app.use(history());////使用history 最好放到pubic静态目录前 app.use(hisrtory())可以配置相应的参数。 参数如下 1.index：配置默认的index页面 2.rewrites：通过正则配置，配置相关路由 3.verbose：日志选项 4.htmlAccep
vue a链接本地地址失效
Yss915的博客
11-08 688
a href链接的相对位置，是相对于index.html的，不是相对于当前文件，在vuecil3中index.html在public文件夹中， 比如我在syslog文件中引用mylogs文件夹中的文件是写的./file/myLogs/web_error.log 而不是../../../public/file/mylogs/web_error.log ...
vue使用a链接地址跳转错误
Yss915的博客
08-27 518
使用router路由跳转时，为 this.$router.push('/register') 使用a链接时，为 href=“/register” 结果跳转到了其他界面 经过百度发现应该使用href=“/#/register” 。
VUE路由去掉“#”
热门推荐
前端菜鸟
11-20 2万+
如果不想要很丑的 hash（地址栏去掉“#”），我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({ mode: 'history', routes: [...] })
Vue项目访问不存在的链接显示空白，怎么让他报错
越努力越幸运的博客
10-12 492
如果，当我运行我的vue项目的时候，我随便输了个网址路由，他居然！！！！直接给我扔了个空白页。不知道的还以为是网页还没加载出来呢？怎么搞？简单，我们给他报404不就行了吗。 首先，我们在我们的views目录下，新建一个NotFound.vue文件。 <template> <img src="../assets/logo.png" /> <h1>404</h1> <h2>抱歉，当前页面不存在</h2> </template&
利用vue实现登陆界面及其跳转
weixin_57959921的博客
02-27 1万+
利用vue实现登陆界面及其页面跳转
VUE 路由路径
LILEILEILOVE的博客
11-24 430
{ path：“*”， redirect:"/index", name:"notFound", hidden:true } 设置一个路径，页面不存在就跳到首页
Vue中如果不是已经配置好的路由（错误的路由），跳转到指定路径——redirect
zyz00000000的博客
03-23 1948
在router.js中配置：当输入没哟配置的路径时，直接跳转到home路径对应页面，且路径也是home路径 { path: '*',//除了已经配置好路由 redirect: '/home' } redirect也可以为一个函数： （1）接收一个参数为to to的值： 举例： { path: '*',//除了已经配...
vue中，404页面——当前页面不存在，直接跳转首页
最新发布
weixin_44867717的博客
05-14 346
【代码】vue中，404页面——当前页面不存在，直接跳转首页。
vue路由拦截登录后跳转到指定页面 参数没了
09-09
Vue路由拦截器是用来在用户访问特定页面之前对其进行身份验证的。在登录成功后，我们可以在路由拦截器中获取用户参数，并将其存储在Session Storage或Local Storage中以供后续使用。这样，即使在跳转到指定页面时丢失了参数，我们仍然可以从存储中获取并传递给目标页面。 以下是一个示例代码，用于登录后跳转到指定页面并传递参数： 在登录成功后，将参数存储在Storage中： ``` // 登录成功后获取参数 let params = { username: 'John', age: 25 }; // 存储参数 sessionStorage.setItem('params', JSON.stringify(params)); ``` 在路由拦截器中，从Storage中获取参数并传递给指定页面： ``` // 路由拦截器 router.beforeEach((to, from, next) => { // 获取存储的参数 let params = JSON.parse(sessionStorage.getItem('params')); // 判断是否存在参数 if (params) { // 将参数添加到跳转的URL中 next({ path: to.path, query: params }); } else { next(); } }); ``` 在指定页面中，接收并使用参数： ``` // 指定页面 export default { created() { // 获取参数 let params = this.$route.query; // 使用参数 console.log(params.username); // 输出：John console.log(params.age); // 输出：25 } } ``` 通过以上代码，即使在跳转到指定页面时丢失了参数，我们仍然可以获取并使用之前存储的参数。这样就解决了参数丢失的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值