Vue3+vite搭建基础架构（6）--- 使用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) => {
   
  //路由发生变化修改页面title
  if (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-picker
      v-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())
  //使用i18n
  const {
   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通用布局页面先写个空的，等后面写菜单栏的时候会用上。