摘要:的路徑的路由組件點擊后的結果你會發現被匹配后中的就會接收到字符串,因此輸出結果如圖所示對象模式如果是一個對象,它會被按原樣設置為組件屬性。最終的就是傳入的
安裝
直接下載(官方CDN)
https://unpkg.com/vue-router/...
通過頁面script標簽引入,如下:
NPM安裝
npm install vue-router --save-dev
安裝完成后需要Vue.use()安裝此功能,例如:
import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter);入門
簡單例子
vue1217
Foo Link Bar Link
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from "vue"; import VueRouter from "vue-router"; import App from "./App"; Vue.use(VueRouter); const foo = { template: "foo" }; const bar = { template: "bar" }; const routes = [{ path: "/foo", component: foo }, { path: "/bar", component: bar }]; let router = new VueRouter({ routes }); /* eslint-disable no-new */ new Vue({ el: "#app", router, render: h => h(App) });
動態路由匹配
通過帶有冒號標記的屬性匹配,例如
path: "/foo/test0" path: "/foo/test1" 都可以被 path: "/foo/:id" 匹配到 并且被匹配到的組件內部可以通過 this.$route.params獲取到被匹配的參數 如上: test0組件下的params參數為 { id: "test0" } 同樣的: /foo/test0/jason/0411 被 /foo/:id/:name/:birth 匹配到的參數如 { id: "test0", name: "jason", birth: "0411" }
小提示:對于通過路由進行組件間的切換時,并不會來回構建組件實例,而是復用已存在的組件,想要監聽路由參數變化可以通過watch屬性或者通過beforeRouteUpdate鉤子函數做操作
{ watch: { "$route"(to, from) { // something to do } } } { beforeRouteUpdate(to, from, next) { // something to do next();// next必須執行不然的話beforeRouteUpdate鉤子函數不會resolved } }
嵌套路由
顧名思義就是路由跳到的組件又包含有路由。
舉個栗子:
const foo = { template: `
foo foo1 foo2 foo3 ` };{{ $route.params.id }}
const home = { template: " home" }; const hm = { template: "hm" }; const pf = { template: "pf" }; const ps = { template: "ps" }; const routes = [{ path: "/:id", component: foo, children: [ { path: "", component: home }, { path: "hm", component: hm }, { path: "pf", component: pf }, { path: "ps", component: ps } ] }];
通過$router導航
在組件Vue實例內部可以通過
this.$router.push(location, onComplete?, onAbort?)
this.$router.replace(location, onComplete?, onAbort?)
this.$router.go(n)
// 字符串 router.push("home") // 對象 router.push({ path: "home" }) // 命名的路由 router.push({ name: "user", params: { userId: 123 }}) // 帶查詢參數,變成 /register?plan=private router.push({ path: "register", query: { plan: "private" }}) const userId = 123 router.push({ name: "user", params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 這里的 params 不生效 router.push({ path: "/user", params: { userId }}) // -> /user // 在瀏覽器記錄中前進一步,等同于 history.forward() router.go(1) // 后退一步記錄,等同于 history.back() router.go(-1) // 前進 3 步記錄 router.go(3) // 如果 history 記錄不夠用,那就默默地失敗唄 router.go(-100) router.go(100)
命名路由
在創建路由的時候可以通過name屬性設置路由名稱
let routes = [{ path: "/foo/:userId", name: "test", component: User }];
如果需要鏈接到這個命名路由我們可以醬紫
也可以醬紫
router.push({ name: "test", params: { userId: 410100 } });
命名視圖
很多時候我們會碰到并存的多個視圖(router-view),我們就需要為視圖設置name沒有設置的為default
當然構建路由的時候也需要設置對應視圖的組件映射
const router = new VueRouter({ routes: [ { path: "/", components: { default: Foo, a: Bar, b: Baz } } ] })
重定向
let routes = [{ path: "/", redirect: "/goods" },{ path: "/goods", component: goods }]; 當path為/的時候會自動重定向至/goods加載goods組件 當然也可以通過name重定向,作用是相同的 let routes = [{ path: "/", redirect: { name: "goods" } },{ path: "/goods", name: "goods", component: goods }]; 當然也可以是一個方法 let routes = [{ path: "/a", redirect: to => { // 方法接收 目標路由 作為參數 // return 重定向的 字符串路徑/路徑對象 }}];
別名
別名與重定向只有一丟丟不同,重定向指/a路徑調到/b路徑加載,別名指還是加載/a路徑只是加載內容是/b路徑下的
const router = new VueRouter({ routes: [{ path: "/a", component: A, alias: "/b" }] });
5.路由參數傳遞
有三種模式進行傳遞:布爾模式、對象模式、函數模式
布爾模式: 如果props被設置為true,route.params將會被設置為組件屬性。
router-link的路徑foo foo的路由 { path: "/foo/:userName", name: "foo", component: foo, props: true } foo組件foo{{userName}}
點擊router-link后的結果
你會發現/foo/params被path匹配后
route.params = { userName: "params" };
props中的userName就會接收到字符串"params",因此輸出結果如圖所示
對象模式:如果props是一個對象,它會被按原樣設置為組件屬性。
{ path: "/foo", name: "foo", component: foo, props: { userName: "From Obj" } }
渲染后的結果:
函數模式
{ path: "/foo", name: "foo", component: foo, props: (route) => ({userName: route.query.name}) }
看起來還是很清楚的,只是props會接收一個當前的路由參數,將參數中的值轉換成你想要的值,以上三種模式自然也不影響通過router-view的v-bind:user-name這種方式傳遞,但是對于同名的參數值會有影響。
let lastProps = {}; let vBindProps = { userName: "vBind", name: "vBind" }; let routeProps ={ userName: "route" }; Object.assign(lastProps,vBindProps,routeProps); // {userName: "route", name: "vBind"} 最終的lastProps就是傳入的props
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90336.html
摘要:的路徑的路由組件點擊后的結果你會發現被匹配后中的就會接收到字符串,因此輸出結果如圖所示對象模式如果是一個對象,它會被按原樣設置為組件屬性。最終的就是傳入的 安裝 直接下載(官方CDN) https://unpkg.com/vue-router/...通過頁面script標簽引入,如下: NPM安裝 npm install vue-router --save-dev 安裝完成后需要Vu...
摘要:的路徑的路由組件點擊后的結果你會發現被匹配后中的就會接收到字符串,因此輸出結果如圖所示對象模式如果是一個對象,它會被按原樣設置為組件屬性。最終的就是傳入的 安裝 直接下載(官方CDN) https://unpkg.com/vue-router/...通過頁面script標簽引入,如下: NPM安裝 npm install vue-router --save-dev 安裝完成后需要Vu...
摘要:你可以在創建實例的時候,在配置中給某個路由設置名稱。如果沒有設置名字,那么默認為。 Vue.js路由(Vue-router) 安裝 直接引入 vue-router下載鏈接https://unpkg.com/vue-router/... npm下載 npm install vue-router 如果在一個模塊化工程中使用它,必須要通過 Vue.use() 明確地安裝路由功能:在你的文...
摘要:路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監測值變化,可以在對象上監聽這個事件。這兩個方法應用于瀏覽器記錄棧,在當前已有的基礎之上,它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器,這里的路由就是SPA(單頁應用)的路徑管理器。再通俗的說,vue-router就是WebApp的鏈接路徑管理系統。vue-router是...
摘要:方法與方法不同之處在于,它并不是將新路由添加到瀏覽器訪問歷史棧頂,而是替換掉當前的路由可以看出,它與的實現結構基本相似,不同點它不是直接對進行賦值,而是調用方法將路由進行替換。 隨著前端應用的業務功能起來越復雜,用戶對于使用體驗的要求越來越高,單面(SPA)成為前端應用的主流形式。大型單頁應用最顯著特點之一就是采用的前端路由系統,通過改變URL,在不重新請求頁面的情況下,更新頁面視圖。...
閱讀 1856·2023-04-25 14:28
閱讀 1892·2021-11-19 09:40
閱讀 2795·2021-11-17 09:33
閱讀 1385·2021-11-02 14:48
閱讀 1710·2019-08-29 16:36
閱讀 3333·2019-08-29 16:09
閱讀 2917·2019-08-29 14:17
閱讀 2378·2019-08-29 14:07