当前位置：首页 > news >正文

路由重定向：redirect

news 来源：原创 2025/4/19 8:02:17

作用：

刚打开一个页面时，是默认进入“/”的页面，重定向可以进入指定页面。

实现一：刚打开页面进入login页面；

routes: [{path: '/',redirect: "/login",},{path: 'login',name: 'Login',component: () => import('../views/Login.vue'),meta: {isMain: true, title: mainTitle}},{path: "error",name: "Error",component: () => import('../views/Error.vue'),meta: {isMain: true, title: mainTitle}},]

进一步：刚打开页面显示的是Main.vue，在里面配置RouterView展示子路由，因为路由重定向redirect所以会展示login子路由，所以刚打开页面由"头部+login内容"组成；

routes: [{path: '/',name: 'Main',component: Main,redirect: "/login",children: [{path: 'login',name: 'Login',component: () => import('../views/Login.vue'),meta: {isMain: true, title: mainTitle}},{path: "error",name: "Error",component: () => import('../views/Error.vue'),meta: {isMain: true, title: mainTitle}},]}]

Main.vue

<template><div class="main"><div class="header">这是头部</div><div class="content"><RouterView></RouterView></div></div>
</template>

实现二：不使用重定向默认展示login页面

routes: [{path: '/',name: 'Login',component: () => import('../views/Login.vue'),meta: {isMain: true, title: mainTitle}},{path: "error",name: "Error",component: () => import('../views/Error.vue'),meta: {isMain: true, title: mainTitle}},]