vue router定義路由的四種方式

2021-10-07 02:19:04 字數 1218 閱讀 1145

vue-router是對瀏覽器bom物件裡的history的封裝。

動態路由匹配

巢狀路由

程式設計式路由

命名路由和命名檢視

在路由路徑裡新增「/：引數名」

path:


'/goods/:goodsid'
元件裡獲取引數使用



}
場景：頁面中需要使用二級子選單。如個人中心一級選單下，有個人資料、我的收藏、購物車等二級選單。

在路由裡使用children

export


default


newrouter(,


]}]}


)
在父元件裡使用 router-view 標籤，作為子元件的入口。使用 router-link 進行跳轉。



'/goods/title'


>顯示商品標題<


/router-link>


'/goods/img'


>顯示商品標題<


/router-link>


<


/router-view>


<


/div>


<


/div>


<


/template>
注意：路由跳轉時使用絕對路徑，路由配置時使用子級路由。

通過 js 來實現頁面的跳轉

$router.


push


("name"


)$router.


push()


$router.


push()


//或者 


$router.


push(}


)$router.go(


1)//元件獲取引數


}
給路由定義不同的名字，根據名字進行匹配

"}">跳轉到商品列表<


/router-link>
注意：路由跳轉 to 必須要使用 v-bind 指令進行繫結，繫結後指令會對object物件進行編譯，生成我們要的路由。否則會原生輸出url。

vue router 的動態路由

一 在你的router.js中配置好路由，動態路由的配置和普通的vue路由略有不同 第一步 在控制路由的js中，設定這樣一段 來配置路由 export default new router 在path鍵值對中，最後的 id就是設定好的動態路由的變數名 第二步 在對應的router link標籤中這樣...

vue router路由巢狀

巢狀路由顧名思義就是路由的多層巢狀。結合vue router仿天貓底部導航欄，給元件me新增巢狀路由，也叫子路由。總共新增兩個子路由，分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置，需要使用children陣列來定義子...

vue router 配置路由

vue router 配置路由 用 vue.js vue router 建立單頁應用，是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式，當你要把 vue router 新增進來，我們需要做的是，將元件 components 對映到路由 routes 然後告訴 vue rout...