VUE3（五）vue路由vue-router4

使用vue-router，這里特別說明一下，我這里記錄的是vue-router文件的編寫。及在頁面中的使用。

我的站點主要分為三個部分：

1：pc端頁面的路由
2：手機端頁面的路由
3：后端管理系統的路由

因此，我這里會使用到路由嵌套（子路由）。

具體的用法請參照官方文檔：

https://router.vuejs.org/

我這里放一下我當前使用文件得我內容。我使用的基礎語言是typescript：

Index.ts

// 引入vue-router對象
import { createRouter, createWebHistory, ErrorHandler } from "vue-router";
/**
 * 定義路由數組
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
  {// 后端管理系統路由組
    path: "/admin",
    redirect: "/admin/home",
    name: "admin",
    component: () => import("/@/views/admin.vue"),
    children: [
        {
            path: "home",
            name: "home",
            meta: { 
              requireAuth: true // 添加該字段，表示進入這個路由是需要登錄的
            },
            component: () => import("/@/views/admin/Home.vue")
        },
        {
            path: "setting",
            name: "setting",
            meta: { 
              requireAuth: true // 添加該字段，表示進入這個路由是需要登錄的
            },
            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")
        },
    ]
  },
];
 
/**
 * 創建路由
 */
const router = createRouter({
  // hash模式：createWebHashHistory，
  // history模式：createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory(),
  routes,
});
 
/**
 * 路由守衛
 */
router.beforeEach((guard) => {
  beforeEach.checkAuth(guard, router);
});
 
/**
 * 路由錯誤回調
 */
router.onError((handler: ErrorHandler) => {
  console.log("error:", handler);
});
 
/**
 * 輸出對象
 */
export default router;

當然，目前這個文件只能滿足最基礎的跳轉，並且在路由首位中添加了404頁跳轉。以上基本都有注釋，參考就好。

在頁面中使用：

Vue3,是可以和vue2一樣將router掛載至vue對象上的。

但是，官方不建議這么做，因此呢，vue-router是每個單頁分別引入的。

大概是這個樣子：

import { useRouter, useRoute } from "vue-router";
export default {
    name: "article,
    components: {},
    // VUE3 語法 第一個執行的鈎子函數
    // setup官方文檔
    // https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數
    setup(props: any, content: any) {
        // 實例化路由
        var router = useRouter();
       // 路由參數
        var route = useRoute();
        /**
         * @name: 聲明data
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-18
         */
        const data = reactive({
            // 文章id
            article_id: route.query.article_id ? route.query.article_id : 0,
        });
/**
         * @name: 子分類顯示
         * @author: camellia
         * @email: [e-mail]
         * @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
                }
            });
        }
}

更多關於vue-router4的功能，請參考官方文檔：

https://next.router.vuejs.org/installation.html

具體代碼實現，請參考我的代碼vue3代碼庫：https://gitee.com/camelliass/vue3blog

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：