今日讲讲路由配置

下载安装路由

1. 下载安装路由库

npm i vue-router

2. 在 src 中新建 views 文件夹，在其中新建页面

3. 在 src 中新建一个 router 文件夹，其中新建一个 index.js

import { createRouter, createWebHashHistory } from 'vue-router';
// 导入页面
import index from '../views/index.vue';
import about from '../views/about.vue';
// 注册
const routes = [
{
path: '/', // 路径名，首页是/
name: 'index', // 页面名
component: index, // 组件，页面对应的文件
},
{
path: '/about',
name: 'about',
component: about,
},
];
// 路由实例
const router = createRouter({
history: createWebHashHistory(),
routes, // 所有的路由
});
// 导出
export default router;

4. 在 main.js 中安装路由

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由实例
import router from './router';
// vue实例
const app = createApp(App)
// 在vue实例上安装路由
app.use(router)
app.mount('#app')

5. 在 App.vue 中写出口

<template>
<router-view></router-view>
</template>

路由模式

模式有两种： h5 、 hash

h5: createWebHistory；http://localhost:5173/about；刷新404

hash:createWebHashHistory；http://localhost:5173/#/about

捕获404页面

1. 新建一个 404 页面（ NotFound ）

2. 导入页面

3. 在配置数组中添加如下：

{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

        

重定向

使用redirect属性

{
path: '/:pathMatch(.*)*',
name: 'NotFound',
redirect: '/'
},