下载安装路由
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 中写出口
1. <template> 2. <router-view></router-view> 3. </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: '/' },
