Vue3+vite搭建基础架构(6)--- 使用vue-router

Vue3+vite搭建基础架构(6)--- 使用vue-router

  • 说明
  • 官方文档
  • 安装vue-router
  • 使用vue-router
  • 测试vue-router

说明

这里记录下自己在Vue3+vite的项目使用vue-router的过程,不使用ts语法,方便以后直接使用。这里承接自己的博客Vue3+vite搭建基础架构(5)— 使用vue-i18n这篇博客,在该博客项目的基础上增加使用vue-router。

官方文档

Vue3使用vue-router官方文档:https://router.vuejs.org/zh/installation.html

安装vue-router

根据官网给的安装命令如下:

npm install vue-router@4

在webstorm里面的Terminal输入npm install vue-router@4命令安装该依赖。执行完如下:
在这里插入图片描述

package.json会增加vue-router版本号
在这里插入图片描述

使用vue-router

在src目录下新建router文件夹,在该文件夹里面创建一个index.js文件。
在这里插入图片描述

router文件夹下的index.js代码:

//引入router路由做页面请求
import { createRouter,createWebHashHistory } from 'vue-router'
/* Layout通用组件 */
import Layout from '../views/layout/layout'//前端页面路由地址
const routes = [{path: '/404', component: () => import('@/views/404')},//必须要把组件放在Layout的children里面,才能在侧边栏的右侧显示页面内容,否则不加载通用架构直接在当前空白页面渲染内容,如:404页面{path: '',component: Layout,redirect: '/home',children: [{path: 'home',name: 'home',component: () => import('@/views/home/index'),meta: {title: '首页', icon: 'home'}},{path: 'hello',name: 'hello',component: () => import('@/components/HelloWorld'),meta: {title: '测试页', icon: 'hello'}}]}
]// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。history: createWebHashHistory(),routes, // `routes: routes` 的缩写
})//路由前置守卫
router.beforeEach((to, from, next) => {//路由发生变化修改页面titleif (to.meta.title) {document.title = to.meta.title}next()
})//导出路由
export default router

在main.js里面引入router配置:
在这里插入图片描述
代码如下:

import { createApp } from 'vue'
//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//将element-plus里面默认语言英文改为中文,需要引入它
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//引入dayjs日期插件
import dayjs from 'dayjs'
//引入国际化配置
import lang from './locale'
//引入router路由
import router from './router'
import './style.css'
import App from './App.vue'const app = createApp(App)
//使用element-plus,并设置语言为中文
app.use(ElementPlus, {locale: zhCn,
})
//通过provide全局注入工具函数
app.provide('$dayjs', dayjs)
//国际化配置使用
app.use(lang)
//使用router路由
app.use(router)
app.mount('#app')

路由里面配置了几个页面地址,这里贴上对应页面代码,404图片随便网上找一个就行。
在这里插入图片描述

在src目录下新建views文件夹,在views文件夹下新建404.vue页面。
404页面代码如下:

<template><div><div class="app-container"><el-col :span="12"><img :src="img_404" alt="404" class="img-style"></el-col><el-col :span="12"><div style="margin-left: 100px;margin-top: 60px"><h1 class="color-main">OOPS!</h1><h2 style="color: #606266">很抱歉,页面它不小心迷路了!</h2><div style="color:#909399;font-size: 14px">请检查您输入的网址是否正确,请点击以下按钮返回主页或者发送错误报告</div><el-button style="margin-top: 20px" type="primary" round @click="handleGoMain">返回首页</el-button></div></el-col></div></div>
</template><script setup>import img_404 from '@/assets/images/gif_404.gif'import { useRouter } from "vue-router"//使用router跳转路由const router=useRouter()const handleGoMain = () => {//跳转到首页router.push({ path: '/home' })}</script><style scoped>.app-container {width: 80%;margin: 120px auto;}.img-style {width: auto;height: auto;max-width: 100%;max-height: 100%;}
</style>

home文件夹下的index.js代码,将App.vue页面代码移到home文件夹下的index.js里面:

<template><p>当前语言的title值:{{$t('title')}}</p><p>当前语言的title值:{{t('title')}}</p><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><!--日期选择器--><el-date-pickerv-model="dateValue"type="date"placeholder="请选择一天"/>
</template><script setup name="home">import {ref, inject, onMounted ,getCurrentInstance} from 'vue'import {getCurrentDate,getDateDiff,getXBeforeDate,getIntermediateDate} from '@/utils/dateUtil'import {login,test} from '@/api/login'import { useI18n } from 'vue-i18n'console.info("useI18n()=",useI18n())//使用i18nconst {t,locale} = useI18n()//日期变量,使用ref进行双向绑定const dateValue = ref('')//获取日期变量值,需要加.value来获取值console.info("dateValue=",dateValue.value)//onMounted页面初始化完成后执行onMounted(()=>{//获取在main.js里面使用provide全局注册的函数/*const dayjs=inject('$dayjs')//使用dayjs将当前时间转换为指定样式console.log("dayjs=",dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))//使用dateUtil工具类获取当前时间console.log("当前日期=",getCurrentDate())//计算2个日期之间相差多少天,只要开始日期和结束日期格式保持一致就行,日期格式为YYYY-MM-DD或者YYYY-MM-DD HH:mm:ss都能计算console.log("相差天数为=",getDateDiff('2024-02-01','2024-03-01','day'))//获取之前日期console.log("获取当前日期的前6天日期=",getXBeforeDate(getCurrentDate(),6,'day'))//获取开始日期与结束日期之间的所有日期console.log("开始日期到结束日期=",getIntermediateDate('2024-02-01','2024-02-15',1,'day'))//接口请求发送示例const data={username:"test111",password:"123456"}test(data).then(response => {console.info("请求成功")}).catch(error => {console.log(error)})*///获取当前语言类型console.log("当前语言:",locale.value)//将默认语言中文改为英文locale.value='en'console.log("当前语言:",locale.value)})
</script><style scoped></style>

App.vue下修改后的代码如下:

<template><div><!--路由入口 在App.vue中使用<router-view>组件来渲染要显示的组件--><router-view/></div>
</template><script setup name="App"></script><style scoped></style>

layout文件夹下的layout.vue代码:

<template><div><el-container><!--头部--><el-header><Navbar></Navbar></el-header><el-container><!--侧边栏--><el-aside width="200px"><SliderBar></SliderBar></el-aside><!--主体内容--><el-main><AppMain></AppMain></el-main></el-container></el-container></div>
</template><script>import { Navbar, SliderBar, AppMain } from './components/index.js'export default {name: "layout",components: {Navbar,SliderBar,AppMain}}
</script><style scoped></style>

layout文件夹下components文件夹下的navbar.vue代码:

<!--通用布局头部内容-->
<template><div>我是头部</div>
</template><script setup name="navbar"></script><style scoped></style>

layout文件夹下components文件夹下的appMain.vue代码:

<!--通用布局页面主体内容-->
<template><div><!--页面内容加载在这里--><router-view></router-view></div>
</template><script setup name="AppMain"></script><style scoped></style>

layout文件夹下components文件夹下sliderBar下的sliderBar.vue代码:

<!--通用布局侧边栏内容-->
<template><div>我是侧边栏</div>
</template><script setup name="SliderBar"></script><style scoped></style>

layout文件夹下components文件夹下sliderBar下的menuTree.vue代码:

<!--菜单树列表-->
<template></template><script setup name="MenuTree"></script><style scoped></style>

layout文件夹下components文件夹下的index.js代码:

export { default as Navbar} from './navbar.vue'
export { default as SliderBar } from './sliderBar/sliderBar.vue'
export { default as AppMain } from './appMain'

测试vue-router

默认进入首页测试,浏览器结果如下:
在这里插入图片描述
404页面测试,浏览器结果如下:
在这里插入图片描述
hello测试页浏览器结果如下:
在这里插入图片描述
这里通用布局layout组件是在页面中间,解决方式是在main.js删除默认的全局样式。删除这句代码,后面全局样式引入自己写的。如下:
在这里插入图片描述
结果如下,不在显示在页面中间,显示正常:
在这里插入图片描述

到这里router路由测试就结束了,页面可以正常跳转,说明router引入没有问题,layout通用布局页面先写个空的,等后面写菜单栏的时候会用上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/690356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云上关于EDAS发布方式

1. 描述蓝绿部署和灰度发布的区别以及适用场景。 蓝绿部署和灰度发布是两种常见的软件发布策略&#xff0c;它们各有特点并适用于不同的场景。 蓝绿部署的特点&#xff1a; 目的&#xff1a;蓝绿部署的主要目的是减少发布时的中断时间&#xff0c;并且能够在新版本出现问题时…

用MQL语言实现报价导出为JSON文件

文章目录 一、MQL语言导出报价为JSON文件意义二、MQL语言导出报价为JSON的代码实现设置输入变量加载历史数据报价写入JSON文件添加数据到json文件脚本主程序 一、MQL语言导出报价为JSON文件意义 数据存储&#xff1a;将报价导出为JSON文件可以将数据以结构化的方式存储在文件中…

JavaScript(JS)与Java的区别与联系

区别&#xff1a; 1.JS是前端语言&#xff0c;Java是后端语言 2.JS是在浏览器上运行的&#xff0c;而Java是要在Java虚拟机&#xff08;JVM&#xff09;上运行 3.JS是弱类型语言&#xff08;不需要声明变量类型&#xff09;&#xff0c;而Java是强类型语言&#xff08;需要声…

sqlserver 事务

下面是 SQL Server 中使用事务的示例 SQL 代码&#xff1a; BEGIN TRANSACTION;UPDATE 表名 SET 列名 新值 WHERE 条件;INSERT INTO 表名 (列1, 列2, 列3) VALUES (值1, 值2, 值3);DELETE FROM 表名 WHERE 条件;COMMIT TRANSACTION;在上面的示例中&#xff0c;通过 BEGIN TRA…

[ linux网络 ] 网关服务器搭建,综合应用SNAT、DNAT转换,dhcp分配、dns分离解析,nfs网络共享以及ssh免密登录

实验准备工作&#xff1a; 网关服务器安装&#xff1a;dhcp bind &#xff08;yum install -y dhcp bind bind-utlis&#xff09; server1安装&#xff1a;httpd (yum install -y httpd) 没有网络就搭建本地yum仓库或者配置网卡使其能够上网。 ( 1&#xff09;网关服务器…

不同域名的页面进行通信,通过iframe和postMessge进行消息通信

不同域名的页面&#xff0c;通过iframe和postMessge进行消息通信 前言 浏览器不同标签页之间进行消息通信&#xff0c;尤其是当这些标签页位于不同域名时&#xff0c;通常需要使用一些特定的技术或协议来实现。以下是几种可能的方法&#xff1a; WebSocket&#xff1a;WebSo…

源聚达科技:抖音店铺2024年卖什么好

随着时代的变迁和科技的进步&#xff0c;消费者的购物习惯与偏好也在不断演变。展望2024年&#xff0c;抖音作为新兴的电商平台&#xff0c;其店铺销售策略需紧跟潮流&#xff0c;才能在激烈的市场竞争中脱颖而出。那么&#xff0c;哪些产品将成为抖音店铺的新宠呢? 首当其冲&…

STM32CubeMax(使用7步)新建工程

现在有时间学习一下STM32用CubeMX新建一个工程的步骤&#xff0c;特此记录一下&#xff1a; 第一步打开STM32CubeMax 第二步搜索芯片型号&#xff1a; 第三步配置时钟&#xff1a; 第四步点选配置时钟源&#xff1a; 第五步填写工程相关的名称路径信息&#xff1a; 第六步选择…

基于SpringBoot3从零配置SpringDoc

基于SpringBoot3从零配置SpringDoc 一、SpringFox二、SpringDoc三、Open API 规范四、SpringBoot3配置Knife4j1.官方参考文档2.添加依赖3.添加配置项4.设置文档首页5.编写控制器6.文档展示 一、SpringFox github SpringFox 已经停止更新了。SpringFox 对 SpringBoot3.0 不适配…

微信小程序开发之Vant组件库

文章目录 环境Vant介绍示例 微信小程序的npm支持安装npm包构建npm 在微信小程序开发中使用Vant准备安装和配置一&#xff1a;安装二&#xff1a;修改app.json三&#xff1a;修改project.config.json四&#xff1a;构建npm包 使用Button组件Calendar组件 参考 环境 Windows 11 …

【开源】基于JAVA+Vue+SpringBoot的就医保险管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 科室档案模块2.2 医生档案模块2.3 预约挂号模块2.4 我的挂号模块 三、系统展示四、核心代码4.1 用户查询全部医生4.2 新增医生4.3 查询科室4.4 新增号源4.5 预约号源 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVue…

5G网络eMBB、uRLLC、mMTC

ITU&#xff08;国际电信联盟&#xff09;于2015年9月正式定义了5G的三大应用场景&#xff1a;eMBB&#xff08;增强型移动宽带&#xff09;、uRLLC&#xff08;低时延高可靠通信&#xff09;、mMTC&#xff08;海量物联网通信&#xff09;。 eMBB是4G MBB&#xff08;移动宽带…

【武器工具篇】

Web安全 信息收集 【搜索引擎】 必应&#xff1a;必应 360搜索&#xff1a;360搜索&#xff0c;SO靠谱 俄罗斯搜索引擎&#xff1a;https://yandex.com/ 【子域名收集】 Virus Total&#xff1a;VirusTotal OneForAll&#xff1a;GitCode - 开发者的代码家园 FOFA&…

把Llama2封装为API服务并做一个互动网页

最近按照官方例子&#xff0c;把Llama2跑起来了测试通了&#xff0c;但是想封装成api服务&#xff0c;耗费了一些些力气 参考&#xff1a;https://github.com/facebookresearch/llama/pull/147/files 1. 准备的前提如下 按照官方如下命令&#xff0c;可以运行成功 torchrun -…

【QT+QGIS跨平台编译】之四十二:【QWT+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、QWT介绍二、QWT下载三、文件分析四、pro文件五、编译实践5.1 Windows下编译4.2 Linux下编译5.3 MacOS下编译一、QWT介绍 QWT是一个基于Qt框架的开源C++库,用于创建交互式的图形用户界面。它提供了丰富的绘图和交互功能,可以用于快速开发图形化应用程序。 QWT包…

程序员怎么利用chatgpt提高效率

在当今这个数字化时代&#xff0c;AI 技术以各种形式融入到我们的生活和工作中&#xff0c;对于程序员而言&#xff0c;AI 可以成为他们的得力助手。特别是 OpenAI 的 ChatGPT&#xff0c;其深度学习模型在编程领域具有很大潜力。 首先&#xff0c;我们介绍一下 GitHub Copilo…

【Larry】英语学习笔记语法篇——非谓语动词和从句是一回事

目录 非谓语动词和从句是一回事 不定式&#xff1a;名词/形容词/副词 1、不定式 名词属性的不定式&#xff1a;作为主语、表语、宾语 形容词属性的不定式&#xff1a;作后置定语 副词属性的不定式&#xff1a;作状语 副词属性的不定式&#xff1a;作插入语 不定式的逻辑…

【CSS】display:flex和display: inline-flex区别

flex&#xff1a;将对象作为弹性伸缩盒显示 inline-flex&#xff1a;将对象作为内联块级弹性伸缩盒显示 DOM结构 <div class"main"><div></div><div></div><div></div><div></div></div>flex .main{…

记录 | pytorch计算ap的方法

假设当前经过标签数据与预测数据的加载&#xff0c;我们得到了下面两个变量&#xff1a; det_boxes&#xff1a;包含全部图像中所有类别的预测框&#xff0c;其中一个边框包含了[left, top, right, bottom, score, NameofImage]gt_boxes&#xff1a;包含了全部图像中所有类别的…

聚合支付备案机构如何有效应对自律监督现场检查

孟凡富 在2023年第四季度&#xff0c;部分已备案的聚合支付机构收到了中国支付清算协会的《中国支付清算协会自律检查通知书》&#xff0c;标志着对其进行的现场检查工作正式启动。此次检查的时间范围涵盖了机构从2022年9月1日至2023年8月31日的运营情况&#xff0c;内容广泛&…