网站建设的三网合一,网店营销策略有哪些,免费行情网站的推荐理由,单页简洁手机网站模板Vue3vite搭建基础架构#xff08;6#xff09;--- 使用vue-router 说明官方文档安装vue-router使用vue-router测试vue-router 说明
这里记录下自己在Vue3vite的项目使用vue-router的过程#xff0c;不使用ts语法#xff0c;方便以后直接使用。这里承接自己的博客Vue3vite搭… Vue3vite搭建基础架构6--- 使用vue-router 说明官方文档安装vue-router使用vue-router测试vue-router 说明
这里记录下自己在Vue3vite的项目使用vue-router的过程不使用ts语法方便以后直接使用。这里承接自己的博客Vue3vite搭建基础架构5— 使用vue-i18n这篇博客在该博客项目的基础上增加使用vue-router。
官方文档
Vue3使用vue-router官方文档https://router.vuejs.org/zh/installation.html
安装vue-router
根据官网给的安装命令如下:
npm install vue-router4在webstorm里面的Terminal输入npm install vue-router4命令安装该依赖。执行完如下:
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.vueconst 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页面代码如下
templatedivdiv classapp-containerel-col :span12img :srcimg_404 alt404 classimg-style/el-colel-col :span12div stylemargin-left: 100px;margin-top: 60pxh1 classcolor-mainOOPS!/h1h2 stylecolor: #606266很抱歉页面它不小心迷路了/h2div stylecolor:#909399;font-size: 14px请检查您输入的网址是否正确请点击以下按钮返回主页或者发送错误报告/divel-button stylemargin-top: 20px typeprimary round clickhandleGoMain返回首页/el-button/div/el-col/div/div
/templatescript setupimport img_404 from /assets/images/gif_404.gifimport { useRouter } from vue-router//使用router跳转路由const routeruseRouter()const handleGoMain () {//跳转到首页router.push({ path: /home })}/scriptstyle 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里面
templatep当前语言的title值:{{$t(title)}}/pp当前语言的title值:{{t(title)}}/pel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-button!--日期选择器--el-date-pickerv-modeldateValuetypedateplaceholder请选择一天/
/templatescript setup namehomeimport {ref, inject, onMounted ,getCurrentInstance} from vueimport {getCurrentDate,getDateDiff,getXBeforeDate,getIntermediateDate} from /utils/dateUtilimport {login,test} from /api/loginimport { useI18n } from vue-i18nconsole.info(useI18n(),useI18n())//使用i18nconst {t,locale} useI18n()//日期变量,使用ref进行双向绑定const dateValue ref()//获取日期变量值,需要加.value来获取值console.info(dateValue,dateValue.value)//onMounted页面初始化完成后执行onMounted((){//获取在main.js里面使用provide全局注册的函数/*const dayjsinject($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.valueenconsole.log(当前语言:,locale.value)})
/scriptstyle scoped/styleApp.vue下修改后的代码如下
templatediv!--路由入口 在App.vue中使用router-view组件来渲染要显示的组件--router-view//div
/templatescript setup nameApp/scriptstyle scoped/stylelayout文件夹下的layout.vue代码
templatedivel-container!--头部--el-headerNavbar/Navbar/el-headerel-container!--侧边栏--el-aside width200pxSliderBar/SliderBar/el-aside!--主体内容--el-mainAppMain/AppMain/el-main/el-container/el-container/div
/templatescriptimport { Navbar, SliderBar, AppMain } from ./components/index.jsexport default {name: layout,components: {Navbar,SliderBar,AppMain}}
/scriptstyle scoped/stylelayout文件夹下components文件夹下的navbar.vue代码
!--通用布局头部内容--
templatediv我是头部/div
/templatescript setup namenavbar/scriptstyle scoped/stylelayout文件夹下components文件夹下的appMain.vue代码
!--通用布局页面主体内容--
templatediv!--页面内容加载在这里--router-view/router-view/div
/templatescript setup nameAppMain/scriptstyle scoped/stylelayout文件夹下components文件夹下sliderBar下的sliderBar.vue代码
!--通用布局侧边栏内容--
templatediv我是侧边栏/div
/templatescript setup nameSliderBar/scriptstyle scoped/style
layout文件夹下components文件夹下sliderBar下的menuTree.vue代码
!--菜单树列表--
template/templatescript setup nameMenuTree/scriptstyle scoped/stylelayout文件夹下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通用布局页面先写个空的等后面写菜单栏的时候会用上。
