說明
這里記錄下自己在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命令安裝該依賴。執(zhí)行完如下:
package.json會增加vue-router版本號
使用vue-router
在src目錄下新建router文件夾，在該文件夾里面創(chuàng)建一個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. 創(chuàng)建路由實例并傳遞 `routes` 配置
const router = createRouter({
// 4. 內部提供了 history 模式的實現。為了簡單起見，我們在這里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的縮寫
})
//路由前置守衛(wèi)
router.beforeEach((to, from, next) => {
//路由發(fā)生變化修改頁面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">請檢查您輸入的網址是否正確，請點擊以下按鈕返回主頁或者發(fā)送錯誤報告</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頁面初始化完成后執(zhí)行
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'))
//接口請求發(fā)送示例
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刪除默認的全局樣式。刪除這句代碼，后面全局樣式引入自己寫的。如下:
結果如下，不在顯示在頁面中間，顯示正常：
文章來源：http://www.zghlxwxcb.cn/news/detail-831479.html
到這里router路由測試就結束了，頁面可以正常跳轉，說明router引入沒有問題，layout通用布局頁面先寫個空的，等后面寫菜單欄的時候會用上。文章來源地址http://www.zghlxwxcb.cn/news/detail-831479.html
到了這里，關于Vue3+vite搭建基礎架構（6）--- 使用vue-router的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
