Vue路由知識

2021-10-24 13:17:31 字數 1406 閱讀 2976

1.作用

將不同的url對應不同的元件 ,比較適合單頁面開發

vue-router是vue的乙個外掛程式,需要安裝使用

2.安裝

1.cdn

2.npm

3.vue-router.js

3.基本使用

new vue(

}});1.定義元件

var student=

2.定義路由

var router=new vuerouter(,{}]

})3.掛載路由到vue例項

new vue();

4.router-link標籤中的to屬性

通過query傳遞引數,引數會拼接到位址列

獲取引數:在當前元件中使用rou

te.q

uery

uter

−lin

k:to

=′pa

th:′

/stu

dent

′,qu

ery:

id:1

′>

oute

r−li

nk

>通過

para

ms傳遞

引數獲取

引數:在

當前元件

中使

用route.query 通過params傳遞引數 獲取引數:在當前元件中使用

route.

quer

yuter

−lin

k:to

=′pa

th:′

/stu

dent

′,qu

ery:

id:1

′>

oute

r−li

nk>通過

para

ms傳遞

引數獲取

引數:在

當前元件

中使用route.params

如果使用parmas傳送引數,需要使用路由名稱進行跳轉

5.命名路由+重定向

var router=new vuerouter(,]

});6.動態路由

動態路由類似新聞詳情頁

只需要開發一次,傳遞不同引數,載入不同內容

引數使用:連線

path:』/details:id』

導致生命週期鉤子函式不會反覆執行

監聽$route

7.巢狀路由-多級路由

路由父子關係

1.建立子元件

2.巢狀router-link標籤

並且巢狀router-view

3.在路由中new vuerouter()給當前路由新增子路由阿屬性

children:[,{}]

vue路由知識點

建立路由,引入vue router自帶的vuerouter類 let router new vuerouter 在路由對映表中註冊元件 let routes 預設展示的路由 預設展示的路由,輸入錯誤位址的時候展示的頁面 展示 let home let list let routes 路由對映表 配置...

vue框架 路由的使用和知識

一些小知識點 動態路由 user username path goods goodsid 新增乙個這個path位址 在8080埠後面加上goods 動態id 就生成了乙個路由 user username post post id path goods goodsid user name 這就是多加了...

vue有關路由的知識點

router view 是用來顯示內容,我們所有的配置在路由表 routes 中的元件都會現在在此容器內14 router link 最終會生成a標籤用來做路由跳轉,每乙個router 1ink必須要乙個屬性叫to,表示跳轉的路徑16在配置跳轉路由的時候可以設定以下引數 路由巢狀 在vue的路由中可...