Vue 實現動態路由及登陸&404頁面跳轉控制&頁面刷新空白解決方案

Vue實現動態路由及登陸&404頁面跳轉控制&頁面刷新空白解決方案

 

by:授客 QQ：1033553122

 

開發環境

 

Win 10

 

Vue 2.9.6

 

node-v10.15.3-x64.msi

下載地址：

https://nodejs.org/en/

 

代碼片斷(router/index.js)

說明：代碼中動態路由的獲取是經過解析菜單資源獲取的

import Vue from "vue";

import Router from "vue-router";

 

import store from "@/store";

import Index from "@/views/Index";

import api from "@/common/network/api";

import Login from "@/views/Login";

import NotFound from "@/views/Error/404";

 

import Cookies from "js-cookie";

 

Vue.use(Router);

 

// 靜態路由

conststaticRoute = [

  {

    path: "/",

    name: "Index",

    component: Index

  },

  {

    path: "/login",

    name: "登陸",

    component: Login

  },

  {

    path: "/error/404",

    name: "notFound",

    component: NotFound

  }

];

 

const router = new Router({

  mode: "history", //  去掉 http://localhost:8080/#的#

  routes: staticRoute

});

 

/*vue是單頁應用，刷新時，從新建立實例，須要從新加載的動態路由，否則匹配不到路由，出現頁面空白的狀況*/

router.beforeEach((to, from, next) => {

  // let userId = sessionStorage.getItem("userId") // 登陸界面登陸成功以後，會把用戶信息保存在會話 // 關閉瀏覽器tab標籤頁，從新打開一個tab頁，從新訪問該站點，這時會開啓一個新的會話，原先登陸後保存的userId丟失

  let token = Cookies.get("token"); // 僅登陸狀況才存在token

  if (to.path === "/login") {

    // 若是是訪問登陸界面，若是token存在，表明已登陸過，跳轉到主頁

    if (token) {

      next({ path: "/" });

    } else {

      // 不然，跳轉到登陸頁面

      next();

    }

  } else {

    if (to.meta.requireAuth) {

      // 若是訪問非登陸界面,且路由須要登陸

      if (!token) {

        // 用戶token不存在，表明未登陸，跳轉登陸

        next({

          path: "/login",

          query: { redirect: to.fullPath } // 把要跳轉的路由path做爲參數，登陸成功後跳轉到該路由

        });

      } else {

        // 用戶已登陸，添加動態菜單和路由後直接跳轉

        addDynamicMenuAndRoutes(to, from, next);

        // 註釋掉一下代碼是addDynamicMenuAndRoutes函數中axios異步請求獲取菜單，請求還沒返回結果就開始執行next()函數，這樣會致使重複請求菜單資源，特別是登陸的時候，會發送兩次請求，解決方案就是把如下注釋掉的代碼放到動態添加菜單和路由方法裏執行

        //next()

 

        //if (to.matched.length == 0) {

        //  router.push(to.path)

        //}

      }

    } else {

      // 不須要登陸，添加動態菜單和路由後，直接跳轉

      addDynamicMenuAndRoutes(to, from, next);

    }

  }

});

 

/**

 * 加載動態菜單和路由

 */

function addDynamicMenuAndRoutes(userName, to, from, next) {

  if (store.state.app.menuRouteLoaded) {

    console.log("動態菜單和路由已經存在.");

    next();

    return;

  }

 

  //優先從本地sessionStorage獲取

  let navMenuData = sessionStorage.getItem("navMenuData");

  if (navMenuData) {

    navMenuData = JSON.parse(navMenuData);

    // 獲取動態路由

    let dynamicRoutes = getDynamicRoutes(navMenuData);

 

    // 設置獲取的路由所有爲根路由(path值爲 "/")下的子路由

    // 這裏，根據靜態路由配置可知router.options.routes[0]爲根路由

    router.options.routes[0].children = [].concat(dynamicRoutes);

    // 這裏爲啥不把 * 匹配放到靜態路由的最後面，是由於若是放置在靜態路由最後面，做爲一級路由，當url同前面的路由都不匹配時，會匹配到 *，這樣一來，刷新頁面時，因爲還沒加載動態路由，預期和動態路由匹配的url，會匹配到靜態路由的 *，而後跳轉404頁面。

    if (router.options.routes[router.options.routes.length - 1].path != "*") {

      router.options.routes = router.options.routes.concat([

        {

          path: "*",

          name: "notFound",

          component: NotFound

        }

      ]);

    }

 

    // 添加路由，讓路由生效

    router.addRoutes(router.options.routes);

 

    // 存儲導航菜單list數據

    store.commit("setNavMenu", navMenuData);

 

    // 設置菜單爲已加載狀態

    store.commit("setMenuRouteLoadStatus", true);

    next();

    if (to.matched.length == 0) {

      router.push(to.path);

    }

  } else {

    // 本地sessionStorage獲取不到，從服務器端讀取

    api.menu

      .getNavMenuData()

      .then(res => {

        // 獲取動態路由

        let dynamicRoutes = getDynamicRoutes(res.data);

 

        // 添加路由

        router.options.routes[0].children = [].concat(dynamicRoutes);

 

        // 若是要添加爲一級路由，則按以下方式拼接路由

        // router.options.routes = staticRoute.concat(dynamicRoutes)

 

        // 注意，如下寫法會致使添加的路由不起做用，爲錯誤的寫法

        // let otherVar=staticRoute.concat(dynamicRoutes)

        // router.addRoutes(otherVar); //添加的路由不起做用

 

        if (

          router.options.routes[router.options.routes.length - 1].path != "*"

        ) {

          router.options.routes = router.options.routes.concat([

            {

              path: "*",

              name: "notFound",

              component: NotFound

            }

          ]);

        }

 

        router.addRoutes(router.options.routes); //會產生重複路由，控制檯會有warn提示，可是不影響，vue-router會自動去重，

 

        // 存儲導航菜單list數據

        sessionStorage.setItem("navMenuData", JSON.stringify(res.data));

        store.commit("setNavMenu", res.data);

 

        // 設置菜單爲已加載狀態

        store.commit("setMenuRouteLoadStatus", true);

 

        next(); /* 注意:路由匹配是在router.addRoutes以前完成的，因此，即使使用router.addRoutes添加動態路由，也會出現to.matched.length也會等於0的狀況，即沒匹配到路由，因此to.matched.length等於0的狀況下，再次執行router.push(to.path)，這樣，再次觸發beforeEach函數調用)*/

        if (to.matched.length == 0) {

          router.push(to.path);

        }

      })

      .then(res => {

        // 保存用戶權限標識集合

      })

      .catch(function(res) {

        console.log(res);

      });

  }

}

 

/**

 * 獲取動態(菜單)路由配置

 * @param {*} menuList菜單列表

 * @param {*} routes遞歸建立的動態(菜單)路由

 */

function getDynamicRoutes(menuList = [], parentRoute = []) {

  for (var i = 0; i < menuList.length; i++) {

    var route = {}; // 存放路由配置

    if (menuList[i].url && /\S/.test(menuList[i].url)) {

      // url不爲空，且包含任何非空白字符

      route = {

        path: menuList[i].url,

        component: null,

        name: menuList[i].name,

        children: [],

        meta: {

          icon: menuList[i].icon,

          index: menuList[i].id,

          requireAuth: menuList[i].requireAuth // 可選值true、false 添加該字段，表示進入這個路由是須要登陸的

        }

      };

 

      try {

        // 根據菜單URL動態加載vue組件，這裏要求vue組件須按照url路徑存儲

        // 如url="sys/user"，則組件路徑應是"@/views/sys/user.vue",不然組件加載不到

        let array = [];

        if (menuList[i].url.startsWith("/")) {

          // 若是url 以 "/"打頭，因此要先去掉左側的 "/"，不然組件路徑會出現 @/views//sys/user的狀況

          array = menuList[i].url.substring(1).split("/");

        } else {

          array = menuList[i].url.split("/");

        }

 

        let url = ""; // 存放url對應的組件路徑

 

        // 組件所在目錄及組件名稱第一個字母大寫，因此須要替換

        for (let i = 0; i < array.length; i++) {

          url +=

            array[i].substring(0, 1).toUpperCase() +

            array[i].substring(1) +

            "/";

        }

        url = url.substring(0, url.length - 1); // 去掉最右側的 '/'

        route["component"] = resolve => require([`@/views/${url}`], resolve);

      } catch (e) {

        console.log("根據菜單URL動態加載vue組件失敗：" + e);

      }

 

      if (menuList[i].children && menuList[i].children.length >= 1) {

        getDynamicRoutes(menuList[i].children, route["children"]);

      }

    } else {

      if (menuList[i].children && menuList[i].children.length >= 1) {

        getDynamicRoutes(menuList[i].children, parentRoute);

      }

    }

    if (JSON.stringify(route) != "{}") {

      parentRoute.push(route);

    }

  }

  return parentRoute;

}

 

export default router;

 

 

 

代碼片斷(src/Login.vue)

methods: {

    login() {

        let userInfo = {

            account:this.loginForm.account,

            password:this.loginForm.password,

            captcha:this.loginForm.captcha

        };

        this.$api.login.login(userInfo)

        .then(res=> {

            if (res.success) {

                Cookies.set("token", res.data.token); // 保存token到Cookie

                sessionStorage.setItem("userName", userInfo.account); // 保存用戶信息到本地會話

                this.$store.commit("setMenuRouteLoadStatus", false); // 重置導航菜單加載狀態爲false

                if (JSON.stringify(this.$route.query) != "{}") { // 不須要跳轉到登陸前的頁面

                    this.$router.push(this.$route.query.redirect); // 登陸成功，跳轉以前頁面

                 } else {

                    this.$router.push("/")

                 }

            } else {

                this.$message({

                    message:res.msg,

                    type:"error"

                });

            }

            this.loading = false;

        })

        .catch(res=> {

            this.$message({

                message:res.message,

                type:"error"

            });

        });

    },

 

菜單數據

data: [{

        id: 1,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "首頁",

        url: "/home",

        perms: null,

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 1,

        level: 0,

        children: [{

                id: 2,

                createBy: null,

                createTime: null,

                lastUpdateBy: null,

                lastUpdateTime: null,

                parentId: 1,

                parentName: null,

                name: "首頁二級菜單1",

                url: "",

                perms: null,

                requireAuth: true,

                type: 1,

                icon: "fa fa-home fa-lg",

                orderNum: 1,

                level: 0,

                children: [{

                        id: 3,

                        createBy: null,

                        createTime: null,

                        lastUpdateBy: null,

                        lastUpdateTime: null,

                        parentId: 2,

                        parentName: null,

                        name: "首頁三級菜單1",

                        url: "",

                        perms: null,

                        requireAuth: true,

                        type: 1,

                        icon: "fa fa-home fa-lg",

                        orderNum: 1,

                        level: 0,

                        children: [{

                            id: 4,

                            createBy: null,

                            createTime: null,

                            lastUpdateBy: null,

                            lastUpdateTime: null,

                            parentId: 3,

                            parentName: null,

                            name: "首頁四級菜單1",

                            url: "/home/level4Menu1",

                            perms: null,

                            requireAuth: true,

                            type: 0,

                            icon: "fa fa-home fa-lg",

                            orderNum: 1,

                            level: 0,

                            children: []

                        }]

                    },

                    {

                        id: 5,

                        createBy: null,

                        createTime: null,

                        lastUpdateBy: null,

                        lastUpdateTime: null,

                        parentId: 2,

                        parentName: null,

                        name: "首頁三級菜單2",

                        url: "/home/level3Menu2",

                        perms: null,

                        requireAuth: true,

                        type: 0,

                        icon: "fa fa-home fa-lg",

                        orderNum: 2,

                        level: 0,

                        children: []

                    }

                ]

            },

            {

                id: 6,

                createBy: null,

                createTime: null,

                lastUpdateBy: null,

                lastUpdateTime: null,

                parentId: 1,

                parentName: null,

                name: "首頁二級菜單2",

                url: "",

                perms: null,

                requireAuth: true,

                type: 1,

                icon: "fa fa-home fa-lg",

                orderNum: 2,

                level: 0,

                children: [{

                    id: 7,

                    createBy: null,

                    createTime: null,

                    lastUpdateBy: null,

                    lastUpdateTime: null,

                    parentId: 6,

                    parentName: null,

                    name: "首頁三級菜單3",

                    url: "/home/level3Menu3",

                    perms: null,

                    requireAuth: true,

                    type: 0,

                    icon: "fa fa-home fa-lg",

                    orderNum: 1,

                    level: 0,

                    children: []

                }]

            }

        ]

    },

    {

        id: 8,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "工做臺",

        url: "/workbench",

        perms: null,

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 2,

        level: 0,

        children: []

    },

    {

        id: 9,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "測試視圖",

        url: "/testerView",

        perms: null,

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 3,

        level: 0,

        children: [{

            id: 10,

            createBy: null,

            createTime: null,

            lastUpdateBy: null,

            lastUpdateTime: null,

            parentId: 9,

            parentName: null,

            name: "測試視圖二級菜單1",

            url: "",

            perms: null,

            requireAuth: true,

            type: 1,

            icon: "fa fa-home fa-lg",

            orderNum: 1,

            level: 0,

            children: [{

                    id: 11,

                    createBy: null,

                    createTime: null,

                    lastUpdateBy: null,

                    lastUpdateTime: null,

                    parentId: 10,

                    parentName: null,

                    name: "測試視圖三級菜單1",

                    url: "/testerView/level3Menu1",

                    requireAuth: true,

                    type: 0,

                    icon: "fa fa-home fa-lg",

                    orderNum: 1,

                    level: 0,

                    children: []

                },

                {

                    id: 12,

                    createBy: null,

                    createTime: null,

                    lastUpdateBy: null,

                    lastUpdateTime: null,

                    parentId: 10,

                    parentName: null,

                    name: "測試視圖三級菜單2",

                    url: "/testerView/level3Menu2",

                    requireAuth: true,

                    type: 0,

                    icon: "fa fa-home fa-lg",

                    orderNum: 2,

                    level: 0,

                    children: []

                }

            ]

        }]

    },

    {

        id: 13,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "配置",

        url: "/settings",

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 4,

        level: 0,

        children: []

    },

    {

        id: 14,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "其它",

        url: "",

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 5,

        level: 0,

        children: [{

            id: 15,

            createBy: null,

            createTime: null,

            lastUpdateBy: null,

            lastUpdateTime: null,

            parentId: 14,

            parentName: null,

            name: "其它菜單",

            url: "/other",

            requireAuth: true,

            type: 0,

            icon: "fa fa-home fa-lg",

            orderNum: 1,

            level: 0,

            children: []

        }]

    }

]

參考連接

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html