您好,登錄后才能下訂單哦!
vue-router 路由基礎(chǔ)的詳解
今天我總結(jié)了一下vue-route基礎(chǔ),vue官方推薦的路由。
一、起步
HTML
<div id="myDiv"> <h2>簡單路由</h2> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link> // 渲染出口 <router-view></router-view> </div>
創(chuàng)建模板(組件):
(也可以用import 引入外部組件)
var foo={template:"<p>我是foo 組件</p>"}; var bar={template:"<p>我是bar 組件</p>"};
組件注入路由:
var routes = [ {path:'/foo',component:foo}, {path:'/bar',component:b ar}, ];
創(chuàng)建路由實(shí)例:
// 這里還可以傳入其他配置 const router = new VueRouter({ routes // (縮寫)相當(dāng)于 routes: routes; });
注意這里 routes 沒有 ‘ r ' (不要寫成 routers)
創(chuàng)建vue實(shí)例(并掛載實(shí)例)
var routerVue = new Vue({ router }).$mount("#myDiv");
二、動態(tài)路由匹配
有時候我們需要的是模板結(jié)構(gòu)一樣,當(dāng)時數(shù)據(jù)不一樣,就相當(dāng)于我們要把不同ID的登錄用戶連接到同一個頁面,但要顯示每個用戶的獨(dú)立信息,這時我們就用到了動態(tài)路由匹配。
動態(tài)路由主要用到了全局 $route.params 和路由的動態(tài)參數(shù),全局route 的 params API 存儲著 路由的所有參數(shù),路徑的參數(shù)用 “ : ”來標(biāo)記:
HTML
<div id="myDiv"> // 點(diǎn)擊對應(yīng)鏈接時傳入對應(yīng)參數(shù)foo 和 bar <router-link to="/User/:foo">Go to foo</router-link> <router-link to="/User/:bar">Go to bar</router-link> <router-view></router-view> </div>
JS
const User = { template:'<p>我的ID是{{ $route.params.id }}</p>', // 在路由切換時可以觀察路由 watch:{ '$route'(to,form){ console.log(to); //要到達(dá)的 console.log(form); } } } const router = new VueRouter({ routes:[ {path:'/user/:id',component:User} // 標(biāo)記動態(tài)參數(shù) id ] }); var myVue = new Vue({ router }).$mount("#myDiv")
三、嵌套路由
1.嵌套路由講的是我們可以在 <router-view>中去在渲染 <router-view> 這時要在配置路由時使用 children
例如:
HTML:
<div id="myDiv"> <router-link to="/User/:foo">Go to foo</router-link> <router-link to="/User/:bar">Go to bar</router-link> <router-view></router-view> </div>
JS:
const User = { template:'<div><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></div>', } // 子路由 const userChildOne = { template:'<div>我是 userChildOne</div>' } const userChildTwo = { template:'<div>我是 userChildTwo</div>' } const router = new VueRouter({ routes:[ {path:'/user/:id',component:User, children:[ // 用法和參數(shù)和routes 一樣 {path:"/user/childone",component:userChildOne}, {path:"/user/childtwo",component:userChildTwo} ] } ] }); var myVue = new Vue({ router }).$mount("#myDiv")
四、命名路由
1.給路由命名指定路路由跳轉(zhuǎn),要用到參數(shù)name 和 v-bind
HTML:
<div id="myDiv"> <!-- 要用v-bind 的綁定to --> <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link> <router-view></router-view> </div>
JS:
const User = { template:'<p>我的ID是{{ $route.params.userId }}</p>', watch:{ '$route'(to,form){ console.log(to); console.log(form); } } } const router = new VueRouter({ routes:[ // name 一一對應(yīng)上 {path:'/user/:userId',name:"userOne",component:User}, {path:'/user/:userId',name:"userTwo",component:User} ] }); var myVue = new Vue({ router }).$mount("#myDiv")
五、命名視圖
1.給渲染視圖 router-view 命名,來制定讓那個視圖渲染組件
HTML:
<div id="myDiv"> <!-- 要用v-bind 的綁定to --> <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link> <!-- 視圖命名 如果不寫name 則為默認(rèn)為 default--> <router-view></router-view> <router-view name='b'></router-view> </div>
JS:
// 四個模板 const UserA = { template:'<p>我是one,ID是{{ $route.params.userId }}</p>', } const UserB = { template:'<p>我是two,ID是{{ $route.params.userId }}</p>', } const UserC = { template:'<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>', } const UserD = { template:'<p>我是four,ID是{{ $route.params.userId }}</p>', } const router = new VueRouter({ routes:[ // name 一一對應(yīng)上 { path:'/user/:userId', name:"userOne", components:{ // 注意這里為components 多個“ s ” default:UserA, b:UserB } }, { path:'/user/:userId', name:"userTwo", components:{ default:UserD, b:UserC } } ] }); var myVue = new Vue({ router }).$mount("#myDiv")
六、重定向 和 別名
重定向 和別名,首先我先來解釋一下什么叫做重定向和別名
『重定向』的意思是,當(dāng)用戶訪問 /a時,URL 將會被替換成 /b,然后匹配路由為 /b,
『別名』 /a 的別名是 /b,意味著,當(dāng)用戶訪問 /b 時,URL 會保持為 /b,但是路由匹配則為 /a,就像用戶訪問 /a 一樣。/a 的別名是 /b,意味著,當(dāng)用戶訪問 /b 時,URL 會保持為 /b,但是路由匹配則為 /a,就像用戶訪問 /a 一樣。
重定向主要用參數(shù):redirect 而別名主要用到參數(shù): alias
HTML:
<div id="myDiv"> <h3>效果查看地址欄最后面的變化</h3> <router-link to="/User/foo">Go to foo</router-link> <router-link to="/User/bar">Go to bar</router-link> <router-link to="/User/Car">Go to bar</router-link> <router-view></router-view> </div>
JS:
const User = { template:'<p>我是同一個頁面</p>', } const router = new VueRouter({ mode:"history", routes:[ { path:'/User/foo',component:User}, { path:'/User/bar',redirect: '/User/foo',component:User}, // 重定向的目標(biāo)也可以是一個命名的路由: // 甚至是一個方法,動態(tài)返回重定向目標(biāo): // 別名設(shè)置 { path:'/User/foo',alias: '/User/Car'} ] }); var myVue = new Vue({ router }).$mount("#myDiv")
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。