vue router引數傳遞

準備工作：

第一步：建立新的元件profile.vue

profile => 配置動態路由

傳遞引數主要有兩種型別：

配置路由的格式： /router/:id

傳遞的方式：在path後面跟上對應的值

傳遞後形成的路徑: router/123, /router/abc

query的型別：

配置路由的格式：/router，也就是普通配置

傳遞的方式：物件中使用query的key作為傳遞的方式

傳遞後形成的路徑: /router?id=123, /router?id=abc

傳遞方式一演示：在path後面跟上對應的值

// 利用vue-router進行引數傳遞一:

import vue from
'vue'
;import router from
'vue-router'
// 路由懶載入 => 優化首屏時間
const
home=(
)=>
import
("../components/home.vue");
const
homenews=(
)=>
import
("../components/homenews.vue");
const
homemessage=(
)=>
import
("../components/homemessage.vue");
const
profile=(
)=>
import
("../components/profile.vue");
const
about=(
)=>
import
("../components/about.vue");
const
user=(
)=>
import
("../components/user.vue"
)// 1. vue.use() 安裝外掛程式
vue.
use(router)
;// 2. 建立vuerouter物件
const routes =[,
,,]}
,,,]
,const router =
newrouter()
//3. 將router物件掛載到main.js
export
default router

"home"
>
"/user'/' + useid"
>
<
/router-link>
}">
<
/router-link>
<
/router-view>
<
/div>
<
/template>
export
default
}}

'user'
>
我是使用者介面<
/h2>
我是使用者介面相關資訊<
/p>
}<
/h2>
}<
/h1>
<
/div>
<
/template>
export
default}}
<
/script>

我是乙個profile元件<
/h2>
<
/h2>
<
/h2>
<
/h2>
<
/h2>
<
/template>
export
default
<
/script>

vue router的引數傳遞

1 新建元件 新建乙個user.vue檔案，新增 2 設定對映 開啟index.js檔案，新增如下 1 新建元件 profile.vue，新增如下 h2 p p div template export default script route.query是乙個物件，裡面是頁面傳過來的資料 2 設定對...

vue router傳遞引數的幾種方式

vue router傳遞引數分為兩大類 程式設計式導航傳遞引數有兩種型別 字串 物件。this.router.push home 想要傳遞引數主要就是以物件的方式來寫，分為兩種方式 命名路由 查詢引數，下面分別說明兩種方式的用法和注意事項。命名路由的前提就是在註冊路由的地方需要給路由命名如 命名路由...

vue router傳遞引數的幾種方式

引數在鏈結上顯示 this.router.push this.route.query.id 引數不在鏈結上顯示 this.router.push 注 採用params在必須要要在路由上配置name，否則undefined routes route.params.id html 取參 this.rou...