vue學習筆記 動態路由 hash和history

2022-08-27 17:45:08 字數 875 閱讀 2670

上一節講了vue-router的基本配置和使用,這節來說動態路由

一、什麼是動態路由

動態路由就是url後面的一些值是可以動態變化的

二、這裡來配乙個動態路由

如下:userid可以動態變化

const routes = [

//建立路由元件

,]

使用者

export default

}}

同時我們通過使用計算屬性(你也可以用函式)就能動態獲取:userid了

userid()

三、url的hash模式和history模式

history模式實際上是以棧來儲存

/ 

// location.hash = 'aaa' //這樣會在鏈結後端新增乙個aaa的路由

//方式其二

history.pushstate({}, '', 'home');

//這個history實際上是乙個棧

//使用back方法出棧

history.back()

//替換操作 replace是替換操作

history.replacestate({}, '', 'sss')

//history的go方法 直接跳轉到棧的階數,負一就是當前棧頂的後面一樓

history.go(-1)

就是go(1)

history.forward()

我們在建立router的時候可以手動修改這兩個模式而預設下vue使用的是hash模式

const router = new vuerouter()

export default router

vue學習筆記 路由

1 路由配置 在vue.config中配置,則在 中可以使用 來表示src目錄下 import aa from aa index.js 2 單頁面可以懶載入 3 建立動態路由 路由中定義 載入同乙個元件頁面 argu.vue,根據不同的name 顯示不同的東西 vue元件中獲取資料 route.pa...

vue 動態路由

因為去官方看英文文件 對例子探索了下 所以 自己也寫了乙個簡單的demo body div id h1 hello h1 p router link to go to foo router link 繫結路由和動態引數 router link to bar 3 go to bar router li...

vue動態路由

addroutes新增的動態頁面重新整理後進入404頁面解決方案 起因因為某個功能的上線與否由後台介面決定,而這個功能可能不止乙個頁面,我們希望每次使用者開啟頁面前,都能呼叫這一介面確定這個功能是否已經啟用,若啟用則直接開啟相關頁面,若未啟用則不顯示相關頁面,直接跳轉入404萬用字元設定的頁面。很顯...