今日讲讲路由配置
下载安装路由
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；刷新404hash:createWebHashHistory；http://localhost:5173/#/about捕获404页面
1. 新建一个 404 页面（ NotFound ）
2. 导入页面
3. 在配置数组中添加如下：
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },重定向
使用redirect属性
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
redirect: '/'
},