Vue中用户输入无效地址，跳转到错误提示页面

最新推荐文章于 2024-05-27 08:53:12 发布
最新推荐文章于 2024-05-27 08:53:12 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： Vue 文章标签： Vue中跳转到错误提示页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyz00000000/article/details/88770015
版权

1. 在动态路由中，有的路径是无效路径，可以让无效的路劲跳转到错误提示页面

组件的$router属性的原型上有一些方法（this.$router）

（1）go方法

（2）replace：用新的路径替换错误路径，同时创建错误页面的组件

a——b（不存在的路径）——c（用c取代了b）；所以路径中就是a——c

（3）push：a——b（不存在的路径）——c（在b后面添加了c）；所以路径就是a——b——c

 

叨唠
关注
专栏目录
vue中实现传数据不跳转页面_【必看】58道Vue常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度...
weixin_39869693的博客
11-20 998
(给前端日刊加星标，提升前端技能)作者：Lucky Girlhttps://zhuanlan.zhihu.com/p/924076281.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react...
使用vue写一个登录页面，有用户名和密码，都做一些输入校验，不符合校验规则就提示重新输入
weixin_35755562的博客
12-17 856
好的，我来给你一些简单的步骤。 安装 Vue 和 Vue CLI。 使用以下命令安装 Vue 和 Vue CLI： npm install -g @vue/cli 创建一个新的 Vue 项目。 使用 Vue CLI 创建一个新的 Vue 项目： vue createmy-project 在项目中创建一个登录组件。 在项目中新建一个名为 "Login.vue" 的文件，用来作为登录组...
vue项目上线路径跳转无效(404问题)
Alice_sy314的博客
04-19 5649
在近期做的一个小项目中，本地路由跳转没有任何问题，使用nginx部署上线后出现很多路由无法跳转的问题。经过一番研究，发现可以通过以下两种方式解决。 法一.将路由改为hash模式 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会向后端发出请求。 为什么hash模式下没有问题 router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login 它的特点在于：
【Vue3】如何处理错误路由跳转页面？
qq_39224105的博客
01-13 605
如何处理错误路由跳转页面
vue登录时，兜底验证与统一抛出错误
W936438835的博客
10-08 937
使用的后台框架：介绍 | vue-element-admin 一、先解决登录时用户账号或者密码出错，try catch没有错误提示(没有进入catch分支) 1、在login/index中，使用handleLogin这个验证方法 <el-button class="loginBtn" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLog.
vue通过url跳转
最新发布
qq_55946937的博客
05-27 217
【代码】vue通过url跳转。
vue 跳转外部链接(百度等)
热门推荐
jiandan1127的博客
01-24 4万+
直接在方法里面写 window.location.href = 'http://www.baidu.com'; ps :  一定要注意, 要加上 http:// ,  不然跳转还是当前域名下
vue项目双击html页面,vue 项目刷新界面出现404问题 , 正常点击跳转没问题
weixin_29585933的博客
06-03 890
这个原因的本质是 history 和 hash 的区别以 www.louhc.com/jichu/123 为例子(123为变量)直观上的区别是：hash模式下，在浏览器地址栏里面会有: www.louhc.com/#/jichu/123 这种带 # 号的情况,视觉上不太美观。history模式下,地址栏为:www.louhc.com/jichu/123 不会出现带#的情况 。致命区别hash模式下...
Spring Boot+Vue前后端分离，如何避免前端页面 404
01-08
这通常是一个404 Not Found页面，向用户显示友好的错误信息，提示他们页面不存在或输入的URL有误。配置如下： ```javascript // 在你的路由配置中添加 { path: '*', component: NotFoundComponent } ``` `...
vue关闭当前页面 跳转_vue常见面试题
weixin_39668965的博客
11-19 5473
1.vue优点？ 答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有...
vue router 页面改变，url出错
Damon99999的博客
08-27 378
描述： vue路由正确导航到所指的页面，但是地址栏的url却出现了问题（对比图3与图5地址栏） 错误： 图1 问题在于“row.orderId”,因为在row这个对象内压根就没这个属性，导致params出问题，最后导致图三地址栏出现无地址的问题 图2 图3 正确 图4 此时params取得到参数，不报错！ 图5 ...
【VUE】两种vue跳转地址传递参数的方法
weixin_44796004的博客
07-21 4225
vue跳转传递参数
vue跳转网页的两种方式
qq_43537987的博客
06-26 3万+
网页跳转的两种方式 使用a标签（<router-link>）方式跳转 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-s...
vue router 的路由传参 params 和 query 的 区别
weixin_30588675的博客
09-05 2263
1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 &...
详解vue 路由跳转四种方式（转载）
友人C君的博客
09-19 1112
1、router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 &...
vue项目上线后在地址栏进行路由跳转出现错误页面，无法正确跳转
weixin_53068161的博客
07-17 2593
vue项目上线后路由跳转出现错误页面，无法正确跳转解决方法： 提示：本文主要介绍遇到vue3项目上线后路由跳转出现错误页面，无法正确跳转的解决方案 解决方法： 更改路由的跳转方式为hash模式： 在router/index.js下添加： import { createRouter, createWebHashHistory } from 'vue-router' 并修改原来的History模式 const router = createRouter({ history: createWebHist
Vue项目中动态绑定src路径不成功(已解决)
line
10-08 2万+
问题： 在做Vue项目的时候，由于项目需求，需要动态绑定img的src时，突然发现如果说是直接请求后台接口的图片地址就能显示，但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候，图片不能显示，控制台也不报错 html代码： &amp;lt;img :src=&quot;MyimgSrc&quot; alt=&quot;&quot;&amp;gt; js代码： this.MyimgSrc = ...
vscode配置@路径提示,并解决vue文件内失效问题
qq_37359757的博客
09-25 9965
1、安装插件：Path Intellisense插件； 2. 插件设置 3.添加： "path-intellisense.mappings": { "@": "${workspaceRoot}/src" } 4.在项目package.json所在同级目录下创建文件jsconfig.json： { "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSynthet
无法访问此网站网址为 http://0.0.0.0:8080/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。 ERR_ADDRESS_INVALID
m0_47265814的博客
07-14 1万+
问题原因 好不容易运行的项目打开网址，却什么都找不到 ，优秀哈，当时的我是生气的~~~~ 当我看见 0.0.0.0 我是觉察到问题的，因为跟我平时运行项目的地址不同 我就去全局搜索了一下子，果然 直觉告诉我这个地址有问题，我试图 将其进行更换 重启项目 就打开了~~~ 好气~~~ 又不能打人~~~ 综上：跑个项目容易吗 ，能不能别整这么多套路 这要是个新人，疯了能把项目运行起来 ...
vue路由跳转定位到页面顶部无效
05-20
在 Vue 路由跳转时，有时候会遇到定位到页面顶部无效的问题。这是因为在路由跳转时，Vue 的默认行为是不会改变页面滚动位置的，而是会保持原来的滚动位置。如果你需要在路由跳转时将页面滚动到顶部，可以使用以下两种方法： 1. 使用 `scrollBehavior` 方法 在 Vue 的路由配置文件中，可以通过 `scrollBehavior` 方法来控制路由跳转后的滚动位置。例如，以下代码可以让每次路由跳转后滚动到页面顶部： ```js const router = new VueRouter({ mode: 'history', routes: [...], scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } }) ``` 2. 在路由跳转后手动设置滚动位置 在路由跳转后，你可以手动设置页面滚动位置。例如，以下代码可以让每次路由跳转后滚动到页面顶部： ```js const router = new VueRouter({ mode: 'history', routes: [...], }) router.afterEach((to, from) => { window.scrollTo(0, 0) }) ``` 以上两种方法都可以解决路由跳转时定位到页面顶部无效的问题。你可以根据自己的需求选择其中一种方法来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值