前言
如果对 vue3 的语法不熟悉的，可以移步 Vue3.0 基础入门快速入门。
如果对 vue-router 语法不熟悉的，可以移步Vue3 系列：vue-router。
github 开源库：Vue3-Vite-Pinia-Naive-Js
gitee 开源库：Vue3-Vite-Pinia-Naive-Js
1. 安装依赖
yarn add vue-router // or npm install vue-router
2. 新增 src/router/index.js 路由配置
import { createRouter, createWebHistory } from "vue-router"; import baseRouters from "./baseRouter.js"; const routes = [...baseRouters]; const _createRouter = () => createRouter({ history: createWebHistory(), routes, scrollBehavior() { return { el: "#app", top: 0, behavior: "smooth", }; }, }); export function resetRouter() { const newRouter = _createRouter(); router.matcher = newRouter.matcher; } const router = _createRouter(); export default router;
3. 新增 src/router/baseRouter.js 静态路由
export default [ { path: "", redirect: "/home", }, { path: "/login", name: "login", component: () => import("@/pages/login.vue"), }, { path: "/layout", name: "layout", component: () => import("@/pages/layout.vue"), children: [ { path: "/home", name: "home", component: () => import("@/pages/home.vue"), }, { path: "/demo", name: "demo", component: () => import("@/pages/demo.vue"), }, ], }, ];
4. 编辑 src/main.js 引入路由
import { createApp } from "vue"; import App from "./App.vue"; // 共用样式 import "@/assets/style/index.scss"; // 路由 import router from "@/router/index.js"; createApp(App).use(router).mount("#app");
5. 编辑 src/App.vue 添加路由视图
<script setup></script> <template> <router-view></router-view> </template> <style scoped lang="scss"></style>
6. 创建路由页面
6.1 新增 src/pages/login.vue 登录页
<script setup> import router from "@/router/index.js"; let handleLogin = () => { router.push({ name: 'home' }) } </script> <template> <div class="login"> <button @click="handleLogin">登录</button> </div> </template> <style lang="scss" scoped></style>
6.2 新增 src/pages/layout.vue 布局页
<script setup></script> <template> <div class="layout"> <div class="asider">asdier</div> <div class="main"> <div class="header">header</div> <div class="content"> <router-view></router-view> </div> </div> </div> </template> <style lang="scss" scoped> .layout { display: flex; } .asider { box-sizing: border-box; height: 100vh; width: 40px; border: 1px solid; } .header { box-sizing: border-box; height: 40px; width: calc(100vw - 40px); border: 1px solid; } .content { box-sizing: border-box; margin: 20px; height: calc(100vh - 80px); border: 1px solid; } </style>
6.3 新增 src/pages/home.vue 首页
<script setup> import router from "@/router/index.js"; let toPage = (name) => { router.push({ name }); }; </script> <template> <div class="home"> home <button @click="toPage('demo')">goDemo</button> <button @click="toPage('login')">goLogin</button> </div> </template> <style lang="scss" scoped></style>
6.4 新增 src/pages/demo.vue demo页
<script setup> import router from "@/router/index.js"; let toPage = (name) => { router.push({ name }); }; </script> <template> <div class="demo"> demo <button @click="toPage('home')">goHome</button> <button @click="toPage('login')">goLogin</button> </div> </template> <style lang="scss" scoped></style>
效果图
综上
vue-router 安装完成。下一章：Vue3+Vite+Pinia+Naive后台管理系统搭建之四：Naive UI 组件库的安装和使用
