vue-router 路由基礎(chǔ)的詳解
創(chuàng)新互聯(lián)專(zhuān)注于禹王臺(tái)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供禹王臺(tái)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，禹王臺(tái)網(wǎng)站制作、禹王臺(tái)網(wǎng)頁(yè)設(shè)計(jì)、禹王臺(tái)網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造禹王臺(tái)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供禹王臺(tái)網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
今天我總結(jié)了一下vue-route基礎(chǔ)，vue官方推薦的路由。
一、起步
HTML
簡(jiǎn)單路由
Go to foo Go to bar // 渲染出口
創(chuàng)建模板（組件）：
(也可以用import 引入外部組件)
重慶分公司
重慶分公司
var foo={template:"我是foo 組件
"};
var bar={template:"我是bar 組件
"};
組件注入路由：
var routes = [
{path:'/foo',component:foo},
{path:'/bar',component:b ar},
];
創(chuàng)建路由實(shí)例：
// 這里還可以傳入其他配置
const router = new VueRouter({
routes // （縮寫(xiě)）相當(dāng)于 routes: routes;
});
注意這里 routes 沒(méi)有 ‘ r ' (不要寫(xiě)成 routers)
創(chuàng)建vue實(shí)例（并掛載實(shí)例）
var routerVue = new Vue({
router
}).$mount("#myDiv");
二、動(dòng)態(tài)路由匹配
有時(shí)候我們需要的是模板結(jié)構(gòu)一樣，當(dāng)時(shí)數(shù)據(jù)不一樣，就相當(dāng)于我們要把不同ID的登錄用戶(hù)連接到同一個(gè)頁(yè)面，但要顯示每個(gè)用戶(hù)的獨(dú)立信息，這時(shí)我們就用到了動(dòng)態(tài)路由匹配。
動(dòng)態(tài)路由主要用到了全局 $route.params 和路由的動(dòng)態(tài)參數(shù)，全局route 的 params API 存儲(chǔ)著 路由的所有參數(shù)，路徑的參數(shù)用 “ ： ”來(lái)標(biāo)記：
HTML
// 點(diǎn)擊對(duì)應(yīng)鏈接時(shí)傳入對(duì)應(yīng)參數(shù)foo 和 barGo to foo Go to bar
JS
const User = {
template:'我的ID是{{ $route.params.id }}
',
// 在路由切換時(shí)可以觀察路由
watch:{
'$route'(to,form){
console.log(to); //要到達(dá)的
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User} // 標(biāo)記動(dòng)態(tài)參數(shù) id
]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
三、嵌套路由
1.嵌套路由講的是我們可以在
例如：
HTML：
Go to foo Go to bar
JS：
const User = {
template:'我的ID是{{ $route.params.id }}
ChildOne ChildOne 四、命名路由
1.給路由命名指定路路由跳轉(zhuǎn)，要用到參數(shù)name 和 v-bind
HTML:
Go to foo Go to bar
JS:
const User = {
template:'我的ID是{{ $route.params.userId }}
',
watch:{
'$route'(to,form){
console.log(to);
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
// name 一一對(duì)應(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 命名，來(lái)制定讓那個(gè)視圖渲染組件
HTML:
Go to foo Go to bar
JS：
// 四個(gè)模板
const UserA = {
template:'我是one,ID是{{ $route.params.userId }}
',
}
const UserB = {
template:'我是two,ID是{{ $route.params.userId }}
',
}
const UserC = {
template:'我是three,ID是{{ <1ro>ute.params.userId }}
',
}
const UserD = {
template:'我是four,ID是{{ $route.params.userId }}
',
}
const router = new VueRouter({
routes:[
// name 一一對(duì)應(yīng)上
{
path:'/user/:userId',
name:"userOne",
components:{ // 注意這里為components 多個(gè)“ s ”
default:UserA,
b:UserB
}
},
{
path:'/user/:userId',
name:"userTwo",
components:{
default:UserD,
b:UserC
}
}
]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
六、重定向 和 別名
重定向 和別名，首先我先來(lái)解釋一下什么叫做重定向和別名
『重定向』的意思是，當(dāng)用戶(hù)訪問(wèn) /a時(shí)，URL 將會(huì)被替換成 /b，然后匹配路由為 /b，
『別名』 /a 的別名是 /b，意味著，當(dāng)用戶(hù)訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶(hù)訪問(wèn) /a 一樣。/a 的別名是 /b，意味著，當(dāng)用戶(hù)訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶(hù)訪問(wèn) /a 一樣。
重定向主要用參數(shù)：redirect 而別名主要用到參數(shù)： alias
HTML:
效果查看地址欄最后面的變化
Go to foo Go to bar Go to bar
JS:
const User = {
template:'我是同一個(gè)頁(yè)面
',
}
const router = new VueRouter({
mode:"history",
routes:[
{ path:'/User/foo',component:User},
{ path:'/User/bar',redirect: '/User/foo',component:User},
// 重定向的目標(biāo)也可以是一個(gè)命名的路由：
// 甚至是一個(gè)方法，動(dòng)態(tài)返回重定向目標(biāo)：
// 別名設(shè)置
{ path:'/User/foo',alias: '/User/Car'}
]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
