vue-router 路由基礎的詳解
更新時間：2017年10月17日 15:24:26 作者：webxiaoma
這篇文章主要介紹了vue-router 路由基礎的詳解的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內容，需要的朋友可以參考下
vue-router 路由基礎的詳解
今天我總結了一下vue-route基礎，vue官方推薦的路由。
一、起步
HTML
<div id="myDiv"> <h1>簡單路由</h1> <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)建路由實例：
// 這里還可以傳入其他配置
const router = new VueRouter({
routes // （縮寫）相當于 routes: routes;
});
注意這里 routes 沒有 ‘ r ' (不要寫成 routers)
創(chuàng)建vue實例（并掛載實例）
var routerVue = new Vue({
router
}).$mount("#myDiv");
二、動態(tài)路由匹配
有時候我們需要的是模板結構一樣，當時數據不一樣，就相當于我們要把不同ID的登錄用戶連接到同一個頁面，但要顯示每個用戶的獨立信息，這時我們就用到了動態(tài)路由匹配。
動態(tài)路由主要用到了全局 $route.params 和路由的動態(tài)參數，全局route 的 params API 存儲著 路由的所有參數，路徑的參數用 “ ： ”來標記：
HTML
<div id="myDiv"> // 點擊對應鏈接時傳入對應參數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); //要到達的
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User} // 標記動態(tài)參數 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:[ // 用法和參數和routes 一樣
{path:"/user/childone",component:userChildOne},
{path:"/user/childtwo",component:userChildTwo}
]
}
]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
四、命名路由
1.給路由命名指定路路由跳轉，要用到參數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 一一對應上
{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 則為默認為 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 一一對應上
{
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")
六、重定向 和 別名
重定向 和別名，首先我先來解釋一下什么叫做重定向和別名
『重定向』的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，然后匹配路由為 /b，
『別名』 /a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。
重定向主要用參數：redirect 而別名主要用到參數： alias
HTML:
<div id="myDiv"> <h2>效果查看地址欄最后面的變化</h2> <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},
// 重定向的目標也可以是一個命名的路由：
// 甚至是一個方法，動態(tài)返回重定向目標：
// 別名設置
{ path:'/User/foo',alias: '/User/Car'}
]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
最近小編接了一個新項目，項目需求要實現一個聊天功能，今天小編通過實例代碼給大家介紹vue cli使用融云實現聊天功能的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要介紹了頁面內錨點定位及跳轉方法總結，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue就是前端上的Java,前端上的C#,有個前端的虛擬DOM引擎,設計理念和Java/C#類似,這篇文章主要給大家介紹了關于Vue新手指南之環(huán)境搭建及入門的相關資料,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了vue swipe自定義組件實現輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
今天小編就為大家分享一篇Vue刷新修改頁面中數據的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了vuex中使用對象展開運算符的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本文主要介紹了Vue3+cesium環(huán)境搭建的實現示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要為大家詳細介紹了Vue實現計算器計算效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue2.* element tabs tab-pane 動態(tài)加載組件操作
這篇文章主要介紹了vue2.* element tabs tab-pane 動態(tài)加載組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
基于Vue+element-ui 的Table二次封裝的實現
這篇文章主要介紹了基于Vue+element-ui 的Table二次封裝的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07