Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用

简介: Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用

前言

如果对 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 组件库的安装和使用


目录
相关文章
|
1天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
19 6
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的乡村养老服务管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的乡村养老服务管理系统附带文章源码部署视频讲解等
14 5
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
14 5
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的西安旅游系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的西安旅游系统附带文章源码部署视频讲解等
14 4
|
1天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
1天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
1天前
|
JavaScript
vue知识点
vue知识点
10 3
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
16 2