使用vue-router，這里特別說明一下，我這里記錄的是vue-router文件的編寫。及在頁面中的使用谊惭。
我的站點主要分為三個部分：
1：pc端頁面的路由
2：手機端頁面的路由
3：后端管理系統(tǒng)的路由
因此，我這里會使用到路由嵌套（子路由）。
具體的用法請參照官方文檔：
我這里放一下我當(dāng)前使用文件得我內(nèi)容圈盔。我使用的基礎(chǔ)語言是typescript：
Index.ts
// 引入vue-router對象
import { createRouter, createWebHistory, ErrorHandler } from "vue-router";
/**
* 定義路由數(shù)組
*/
const routes = [
{// 404路由
path: '/404',
name: '404',
component: ()=>import('/@/views/404.vue')
},
{// 后端管理系統(tǒng)路由組
path: "/admin",
redirect: "/admin/home",
name: "admin",
component: () => import("/@/views/admin.vue"),
children: [
{
path: "home",
name: "home",
meta: {
requireAuth: true // 添加該字段豹芯，表示進(jìn)入這個路由是需要登錄的
},
component: () => import("/@/views/admin/Home.vue")
},
{
path: "setting",
name: "setting",
meta: {
requireAuth: true // 添加該字段，表示進(jìn)入這個路由是需要登錄的
},
component: () => import("/@/views/admin/Setting.vue")
},
]
},
{// 博客主站pc端頁面路由
path: "/pc",
redirect: "/pc/index",
name: "pc",
component: () => import("/@/views/pc.vue"),
children: [
{
path: "index",
name: "首頁",
component: () => import("/@/views/pc/Home.vue"),
},
]
},
{// 博客主站手機端頁面路由
path: "/phone",
redirect: "/phone/pindex",
name: "phone",
component: () => import("/@/views/phone.vue"),
children: [
{
path: "pindex",
name: "Home",
component: () => import("/@/views/phone/Home.vue")
},
]
},
];
/**
* 創(chuàng)建路由
*/
const router = createRouter({
// hash模式：createWebHashHistory驱敲，
// history模式：createWebHistory
history: createWebHistory("/"),
// history:createWebHashHistory(),
routes,
});
/**
* 路由守衛(wèi)
*/
router.beforeEach((guard) => {
beforeEach.checkAuth(guard, router);
});
/**
* 路由錯誤回調(diào)
*/
router.onError((handler: ErrorHandler) => {
console.log("error:", handler);
});
/**
* 輸出對象
*/
export default router;
當(dāng)然铁蹈，目前這個文件只能滿足最基礎(chǔ)的跳轉(zhuǎn)，并且在路由首位中添加了404頁跳轉(zhuǎn)癌佩。以上基本都有注釋木缝，參考就好。
在頁面中使用：
Vue3,是可以和vue2一樣將router掛載至vue對象上的围辙。
但是，官方不建議這么做放案，因此呢姚建，vue-router是每個單頁分別引入的。
大概是這個樣子：
import { useRouter, useRoute } from "vue-router";
export default {
name: "article,
components: {},
// VUE3 語法 第一個執(zhí)行的鉤子函數(shù)
// setup官方文檔
// https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數(shù)
setup(props: any, content: any) {
// 實例化路由
var router = useRouter();
// 路由參數(shù)
var route = useRoute();
/**
* @name: 聲明data
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-18
*/
const data = reactive({
// 文章id
article_id: route.query.article_id ? route.query.article_id : 0,
});
/**
* @name: 子分類顯示
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-15 */
const cateSonShow = (cate_id_son:number) =>{
data.cate_id_son = cate_id_son;
router.push(
{
path: '/pc/articleList',
// 路由query傳參
query: {
cate_id_son: data.cate_id_son
}
});
}
}
更多關(guān)于vue-router4的功能吱殉，請參考官方文檔：
https://next.router.vuejs.org/installation.html
具體代碼實現(xiàn)掸冤，請參考我的代碼vue3代碼庫：https://gitee.com/camelliass/vue3blog
有好的建議，請在下方輸入你的評論友雳。
歡迎訪問個人博客
https://guanchao.site
