4、Vue 3 - Vue Router 使用实录 : 路由重定向与 404

路由重定向

路由重定定需要在路由中进行配置。下面对路由进行一个改造。

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
    history: createWebHistory(),
    routes:[
        // 当访问根路由时，重定向到 home
        {
            path:'/',
            redirect:'/home'
        },
        {
            path:'/home',
            name:'home',
            component: () => import('@/views/HomeView.vue'),
            meta:{
                'title':'首页',
            }
        },
        {
            path:'/about',
            name:'about',
            component: () => import('@/views/AboutView.vue'),
            meta:{
                'title':'关于'
            }
        }
    ]
})

export default router

404 路由

当访问一个不存在的路由时，可以自定义一个 404 页面。

其路由格式为：apth: '/patchMatch(.*)'，用于表示无法匹配的路由。

1、定义 404 页面

src/views/404.vue

<template>
    <div class="mt-5 p-5 bg-primary text-white rounded">
        404
    </div>
</template>

2、定义路由

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
    history: createWebHistory(),
    routes:[
		...
        
        {
            path:'/:patchMatch(.*)',
            name:'404',
            component: () => import('@/views/404.vue')   
        }
    ]
})

export default router