文章列表
-
- vue-router鉤子函數實現路由守衛
- 概述何為路由守衛？路由守衛有點類似于ajax的請求攔截器，就是請求發送之前先給你攔截住做一些事情之后再去發送請求，同樣這里的路由守衛意思差不多；簡單理解為就是你在進路由之前，首先把你攔住，對你進行檢查；這是不是有點中學門口的保安？進來之前攔住，有學生證就進，沒有學生證就不讓進；當然，路由守衛不僅僅只...
- 日期：2022-09-30
- 瀏覽：17
- 標簽： Vue
-
- vue3使用vue-router的完整步驟記錄
- 前言對于大多數單頁應用程序而言，管理路由是一項必不可少的功能。隨著新版本的Vue Router處于Alpha階段，我們已經可以開始查看下一個版本的Vue中它是如何工作的。Vue3中的許多更改都會稍微改變我們訪問插件和庫的方式，其中包括Vue Router。一、第一步：安裝vue-routernpm ...
- 日期：2022-09-28
- 瀏覽：55
- 標簽： Vue
-
- MySQL Router實現MySQL的讀寫分離的方法
- 目錄1.簡介2.配置MySQL Router2.1 安裝MySQL Router2.2 啟動并測試MySQL Router3.MySQL Router的配置文件解釋1.DEFAULT片段的配置。2.logger片段的配置。3.routing片段的配置。4.為MySQL Router提供SysV腳本1...
- 日期：2023-10-02
- 瀏覽：254
-
- Vue Router根據后臺數據加載不同的組件實現
- 目錄實際項目中遇到的需求有一些不好的實現方式個人感覺比較好的實現方式功能已實現，但我又開始了新的思考最終方案——高階組件實際項目中遇到的需求同一個鏈接需要加載不同的頁面組件。根據用戶所購買服務的不同，有不同的頁面展現。有一些不好的實現方式 直接把這幾個組件寫在同一個組件下，通過v-if去判斷。...
- 日期：2023-02-16
- 瀏覽：11
- 標簽： Vue
-
- keep-Alive搭配vue-router實現緩存頁面效果的示例代碼
- Vue工程中有些頁面需要有緩存。這個功能通過keep-alive組件實現，keep-alive組件可以使被包含的組件保留狀態，或避免重新渲染。在routes.js中定義路由，在路由中定義元信息(meta字段)，需要緩存的頁面就需要在meta對象中定義一個字段，這里設置為keepAlive，設置為tr...
- 日期：2023-01-11
- 瀏覽：216
- 標簽： Vue
-
- vue-router之解決addRoutes使用遇到的坑
- 最近項目中使用了vue-router的addRoutes這個api，遇到了一個小坑，記錄總結一下。場景復現：做前端開發的同學，大多都遇到過這種需求：頁面菜單根據用戶權限動態生成，一個常見的解決方案是：前端初始化的時候，只掛載不需要權限路由，如登陸，注冊等頁面路由，然后等用戶登錄之后，后端返回當前用戶...
- 日期：2023-01-03
- 瀏覽：18
- 標簽： Vue
-
- vue addRoutes路由動態加載操作
- 需求：增加權限控制，實現不同角色顯示不同的路由導航思路：每次登陸后請求接口返回當前角色路由核心方法：vue-router2.2.0的addRoutes方法 + vuex以下是我實現的獲取菜單路由的方法，我將該方法的調用放在首頁組件的生命鉤子中，即便用戶刷新瀏覽器清空了路由還是會重新調用接口獲取，不至...
- 日期：2022-12-17
- 瀏覽：160
- 標簽： Vue
-
- vue 解決addRoutes多次添加路由重復的操作
- 我就廢話不多說了，大家還是直接看代碼吧~import Vue from ’vue’import Router from ’vue-router’Vue.use(Router)const createRouter = () => new Router({ mode: ’history’, rou...
- 日期：2022-12-17
- 瀏覽：253
- 標簽： Vue
-
- Vue this.$router.push(參數)實現頁面跳轉操作
- 很多情況下，我們在執行點擊按鈕跳轉頁面之前還會執行一系列方法，這時可以使用 this.$router.push(location) 來修改 url，完成跳轉。push 后面可以是對象，也可以是字符串：// 字符串this.$router.push(’/home/first’)// 對象this.$r...
- 日期：2022-11-25
- 瀏覽：15
- 標簽： Vue
-
- vue router-link 默認a標簽去除下劃線的實現
- 我就廢話不多說了，大家還是直接看例子吧~.router-link-active{text-decoration: none;}vue的router-link默認的a標簽點擊會有一個陰影補充知識：vue-router更改router-link點擊時樣式默認類：router-link-active：可以...
- 日期：2022-11-05
- 瀏覽：175
- 標簽： Vue
排行榜
網公網安備