网站右侧悬浮代码,网站开发工具评价,邯郸网络科技公司电话,百度搜索风云排行榜下载安装路由 1. 下载安装路由库 npm i vue-router 2. 在 src 中新建 views 文件夹#xff0c;在其中新建页面 3. 在 src 中新建一个 router 文件夹#xff0c;其中新建一个 index.js import { createRouter, createWebHashHistory } from vue-router; // 导入页面 imp…下载安装路由 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: createWebHistoryhttp://localhost:5173/about刷新404 hash:createWebHashHistoryhttp://localhost:5173/#/about 捕获404页面 1. 新建一个 404 页面 NotFound 2. 导入页面 3. 在配置数组中添加如下 { path: /:pathMatch(.*)*, name: NotFound, component: NotFound },          重定向 使用redirect属性 { path: /:pathMatch(.*)*, name: NotFound, redirect: / },