Vue路由——重定向、模式、404页面

最新推荐文章于 2023-09-14 12:58:31 发布

Tokisaki_Kurumi

最新推荐文章于 2023-09-14 12:58:31 发布

阅读量360

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Tokisaki_Kurumi/article/details/117195562

版权

本文介绍了Vue路由的配置，包括如何设置重定向以解决初始页面为空的问题，讨论了hash模式和history模式的差异，并详细讲解了如何设置404错误页面，确保未匹配到的路由能够正确跳转到指定的组件页面。

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

重定向

配置了路由后，页面刚打开是空的，所以需要设置默认初始页面。
第一种方法是：

const routes = [
  {
   
	path :"/",
	component:Find
  },
  {
   
  	path:"/find",
  	component:Find
  }
]

缺点，初始"/"页面和“/find”页面效果一样

解决

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tokisaki_Kurumi

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue:路由-重定向-404提示-模式设置

Forever_Hopeful的博客

09-01

657

Vue:路由-重定向-404提示-模式设置

Vue3路由——基本使用、动态路由、路由正则、重复参数、嵌套路由、编程式导航、命名路由、重定向、别名、路由模式与导航守卫

weixin_45732235的博客

11-16

813

Vue3路由

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

Vue在 Nuxt.js 中重定向 404 页面的方法

10-17

主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

vue访问未定义的路由时重定向404

一家外包公司的码农，专职前端开发

01-18

3074

我们在访问未配置的路由时，就会出现一个空白界面，如何重定向404呢，废话不多说，直接来方法。第一种：官方路由守卫。第二种：可以在配置路由中配置 " * " ，对未进行配置的路由进行重定向。第一种实现方法：使用路由守卫进行。这种方法也可以实现404跳转，但是具有一定的局限性，如果路由配置的比较多的话，使用不太方便，这里就不介绍路由守卫了，看一下官方文档就很容易理解。第二种：可以在配置路由中配置 " * " ，对未进行配置的路由进行重定向。 import Vue from 'vu

vue项目路由重定向以及404页面

freeman_xv1的博客

02-18

1011

import Vue from 'vue' import VueRouter from 'vue-router' import Index from '@/views/Index/Index.vue' import NotFound from '@/views/NotFound/NotFound.vue' Vue.use(VueRouter) const routes = [ { path: '/', //默认重定向到首页 name: 'dashboard', compon.

Vue中报错： Redirected when going from “x“ to “x“ via a navigation guard

江咏之

08-21

6322

@vue/cli 4.3.1 vue-router: ^3.3.2 使用路由重定向做了登录验证后, 报错 Error: Redirected from “/login” to “/index” via a navigation guard. Error: Redirected from “/login” to “/index” via a navigation guard. 解决方案: 删除 node_modules ，到 package.json 中将 vue-router 改为 3.0.7 ，重新

vue-router——重定向-redirect、过渡动画、路由钩子

qq_35574727的博客

08-07

9984

一.vue-router的重定向-redirect 有时候设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。 redirect基本重定向 我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。 export defa...

Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录

Joyce的前端日常

12-20

1万+

本文通过实战讲解如何在Vue的工程中配置路由，以及父子组件之间如何通信。

vue引入路由——帮助管理页面跳转逻辑

qq_45947664的博客

11-03

413

1、安装路由2、准备两个存在相互跳转逻辑的页面新建文件夹views新建文件 AboutViews.vue HomeViews.vue3、配置独立文件新建文件夹router 新建文件 index.jshistory 表示访问方式4、在main.js文件进行全局导入和挂载5、最后使用或 router-link 标签——的声明式导航，并router-link标签添加to属性值 ==》来是router文件夹下的index.js文件中的配置，最后运行显示。

关于vue的域名重定向和404

weixin_33863087的博客

08-24

949

//创建路由对象并配置路由规则 let router = new VueRouter({ routes:[ {path:'/',redirect:{name:"index"}}, // 重定向到主页 {name:'index',path:'/index',component:Index}, {path:'/login',compon...

vue Error: Redirected from X to Y via a navigation guard.

阿之阿佐

10-29

1578

看看beforeRouteLeave守卫导致该跳转离开的路由又跳转回来

Vue: Redirected when going from “x“ to “x“ via a navigation guard

最新发布

html0010的博客

09-14

9354

Vue Router的重定向功能非常强大，可以根据不同的需求进行设置。无论是基于路径、命名路由、参数还是查询参数，我们都可以根据自己的需求设置重定向。从简单的路径重定向到复杂的条件性和动态重定向，通过合理使用重定向，可以改善用户体验并导航用户到正确的页面。

vue跳转到子路由时报错error:Redirected from “/login“ to “/index“ via a navigation guard 已解决

weixin_44862325的博客

09-19

1万+

方法一 npm nui vue-router npm i vue-router@3.3.1 -S 如果还是不行就使用方法二方法二在router文件夹下面的index文件中添加如下代码： const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) re.

vue 代理重定向_401 vue重定向3种方式

weixin_39781930的博客

12-19

900

方式1：redirect： '/header'方式2：redirect： { name： 'header' }方式3：redirect： to => {// console.log(to)return {name： 'about'}}10-重定向.htmlDocument// 3. 组件const One = {template: `one组件`}// 实例化const router = ...

vue路由

pfuzj的博客

05-29

413

1.$route.path 字符串，对应当前路由的路径，老是解析为绝对路径，如 "/foo/bar"。 2.$route.params 一个 key/value 对象，包含了动态片断和全匹配片断，若是没有路由参数，就是一个空对象。 3.$route.query 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，若是没有查询参数，则是个空对象。 4.$route.hash 当前路由的 hash 值 (带.

第97天学习打卡（Vue vue-router 嵌套路由参数传递 重定向 路由模式与404 路由钩子与异步请求）

doudoutj的博客

04-15

283

Vue: vue-router路由测试 1.先删除没有用的东西 2.components目录下存放我们自己编写的组件 3.定义一个Content.vue的组件 <template> <h1>内容页</h1> </template> <script> export default { name: "Content" } </script> <style scoped> </style> 4.安装路由

Vue的路由整理

Cool_so_cool的博客

04-12

259

路由：一个路径对应一个组件 1.创建组件例如： let home 2.配置路由映射表 3.注册路由映射表 4. 把路由挂载到根实例上；基础路由 <div id="app">  <!-- router-li...

Vue项目404页面定制与路由失效重定向

在Vue项目开发中，遇到路由不存在时的404页面管理...总结起来，Vue项目中处理路由不存在时的404页面，关键在于灵活配置路由和在特定场景下（如token失效）正确处理重定向逻辑。这种做法提高了应用的稳定性和用户体验。