今日讲讲路由配置

下载安装路由

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: '/'
},