Vue3-32-路由-重定向路由

最新推荐文章于 2024-09-08 07:56:26 发布
最新推荐文章于 2024-09-08 07:56:26 发布
阅读量2.5k 收藏 6
点赞数 9
分类专栏： Vue3 文章标签： vue3 路由 重定向路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39505245/article/details/135299614
版权
本文介绍了Vue路由中的重定向功能，包括直接路径重定向、命名路由重定向、方法返回目标路由以及重定向到相对路径。着重讲解了不同场景下的重定向用法和注意事项。
摘要由CSDN通过智能技术生成

什么是重定向

路由的重定向 ：将匹配到的路由 【替换】 为另一个路由。
redirect : 重定向的关键字。

重定向的特点

1、重定向是路由的直接替换,路由的地址是直接改变的；
2、在没有子路由配置的情况下，重定向的路由可以省略 component 属性的配置，因为根本不会渲染组件；

重定向的几种写法

1.直接使用路径重定向

const routsList = [
    {
   path:'/a',name
了解本专栏 订阅专栏 解锁全文 超级会员免费看
NorthCastle
关注
专栏目录
订阅专栏
路由的重定向
qq_48431032的博客
09-01 324
路由的重定向 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"><
vue-router为激活的路由设置样式操作
11-20
在Vue.js应用中，Vue Router是官方推荐的路由管理库，它使得页面间的导航和状态管理变得简单。本文将详细讲解如何为Vue Router中的激活路由设置样式，以及解决子页面中`router-link`对应的导航栏激活样式问题。 ...
vue3路由重定向
风中追风
09-07 9928
指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；1.新建项目 并引入vue和vue-router；4.使用redirect 属性设置路由重定向；3.createRouter定义和配置路由；2.使用Vue.use注册路由；
Vue3路由机制router(2)
南城余coding的博客
12-20 865
Vue3路由机制router(2)
【vue3|第28期】 Vue3 + Vue Router：探索路由重定向的使用与作用
最新发布
Commas的博客
09-08 916
在 Web 应用开发中，Vue.js 无疑是一个强大的框架，尤其是结合 Vue Router 使用时，能够轻松管理单页面应用（SPA）的路由。今天，我们将深入探讨 Vue3 和 Vue Router 中的一个关键功能——路由重定向。
vue3(十三)-基础入门之路由配置与重定向
weixin_43520586的博客
01-03 2625
App.vue 导入了 Navbar 组件，所以需要创建该组件；看作一个插槽，点击相应的跳转标签，就根据路径到。找与跳转标签中的路径一致的 path，根据。文件中路径与组件的映射关系，显示相应的组件。文件，配置路径与组件的映射关系。// 1、路径字符串/ 拼接参数。// 1、路径字符串/ 拼接参数。// 2、路径字符串？// 2、路径字符串？上述第一种一级路由写法中，/* 根据需要进行调整 */路径下的二级路由与重定向。1、路径字符串/ 拼接参数。三个标签后，分别展示。在父组件中导入子组件。
vue 路由
日上フブキのブログ
10-13 228
一 配置简单路由 首先 安装 npm install vue-router --save 在main.js, 引入路由和子组件，并配置路由 App.vue 引用路由 main.js import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import TestOne from...
vue3 - 38.router.8 - 路由重定向 / 别名
qq_34111842的博客
11-14 654
将 / 别名为 /root，意味着当用户访问 /root时，URL 仍然是 /user，但会被匹配为用户正在访问。1.我们用redirect来实现路由重定向，当我们访问项目的时候，可以通过重构定向来自动默认打开指定的页面。3）函数模式配置，可传参。2.别名：alias。
[Vue3] 重定向 redirect
Ryan-Yu的博客
03-26 1127
效果：访问根路径时自动访问/home路径。
基于vue-router 多级路由redirect 重定向的问题
10-18
**知识点三：多级路由重定向的问题** 在多级路由中进行重定向时，如果路径没有正确配置，可能会导致页面无法加载或者加载的页面不正确。例如，重定向时如果目标路由不存在或者重定向路径书写错误，就会出现 404 ...
vue-router重定向和路由别名的使用讲解
10-17
在 Vue Router 中，重定向和路由别名是非常重要的功能，它们可以帮助我们优化用户体验和实现更灵活的导航。 **一、重定向** 重定向意味着当用户尝试访问一个特定的路径时，Vue Router 会自动将他们导向另一个预设...
Vue——vue3路由重定向redirect写法
qq_43201350的博客
10-09 5468
Vue——vue3路由重定向redirect写法
vue的router学习笔记3之路由重定向和别名
Lpd_Reason的博客
02-17 615
1.路由重定向 const router = new VueRouter({ routes: [ { path: '/a', redirect: to =&gt; { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }} ] }) const router = new VueRouter({ rou...
路由重定向
qq_36827625的博客
11-20 2276
路由重定向 当你向向一个IP发送消息时，网关地址还不一样时，需要重定向： 你的IP 10.10.100.10 对方IP10.10.100.11附属IP10.10.90.12 当你想访问10.10.90.12时，需要对你的电脑做转换。只要是向10.10.90.12网段发送的消息都走10.10.100.11网关。 命令： route add 10.10.90.0 mask 255.255.255.0 10.10.100.11 ...
路由重定向和别名
官方推荐
01-31 1460
路由重定向和别名；路由重定向；路由别名
【Vue.js】路由基础-动态路由、嵌套路由、编程式导航、重定向
LuWeien的博客
03-02 7708
当我们点击outer-link的时候路由就发生改变了，然后就会去路由表里面找对映的是哪个path，找到对应的path就去找对应的组件，将对应的组件放入router-view里面。这里的vue3是通过CDN方式引入, 由于地址在国外可能会比较慢, 可以将代码复制到本地去引入, 注意这个网站有的cdn使用不了(可以往下找使用旧一点版本)这个网站里面有大量的国内镜像资源, cdn是内容分发网络, 可以进入网站直接复制链接浏览器打开将源码复制下来在本地使用, 和vue的本地引入是一样的道理。
vue多级路由及重定向
05-26
Vue的多级路由和重定向是非常常见的应用场景，下面我简单介绍一下如何实现。 首先我们需要在`router/index.js`中定义多级路由，例如： ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Page1 from '@/components/Page1' import Page2 from '@/components/Page2' import Page3 from '@/components/Page3' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/page1', name: 'Page1', component: Page1, children: [ { path: 'page2', name: 'Page2', component: Page2 }, { path: 'page3', name: 'Page3', component: Page3 } ] } ] }) ``` 上述代码定义了一个多级路由，`/page1`是一级路由，`/page1/page2`和`/page1/page3`是二级路由。 接下来我们需要实现重定向功能，例如将`/`重定向到`/home`： ``` export default new Router({ routes: [ { path: '/', redirect: '/home' }, { path: '/home', name: 'Home', component: Home }, { path: '/page1', name: 'Page1', component: Page1, children: [ { path: 'page2', name: 'Page2', component: Page2 }, { path: 'page3', name: 'Page3', component: Page3 } ] } ] }) ``` 上述代码中，我们定义了一个重定向路由，将`/`重定向到`/home`。 以上就是Vue多级路由和重定向的简单实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值