聲明式路由導(dǎo)航
router官網(wǎng)-起步
聲明式路由導(dǎo)航其實(shí)就是使用官方給的<router-link>路由導(dǎo)航標(biāo)簽直接進(jìn)行路由跳轉(zhuǎn)
<body>
<div id="app">
<!--
<router-link>路由導(dǎo)航標(biāo)簽，用于找到path屬性中url對應(yīng)的組件，
通過傳入 `to` 屬性指定鏈接.<router-link> 默認(rèn)會被渲染成一個(gè) `<a>` 標(biāo)簽
-->
<router-link to="/login">注冊</router-link>
<router-link to="/reg">登陸</router-link>
<!-- 路由出口
<router-view>路由出口標(biāo)簽，相當(dāng)于路由導(dǎo)航標(biāo)簽的一個(gè)中轉(zhuǎn)站，通過點(diǎn)擊不同的路由導(dǎo)航標(biāo)簽
來實(shí)時(shí)的展示該導(dǎo)航標(biāo)簽所對應(yīng)的組件，路由匹配到的組件將渲染在這里
-->
<router-view></router-view>
</div>
<script>
// 1. 定義 (路由) 組件。
var login={
template:'<div><h1>登陸頁面</h1></div>'
}
var register={
template: '<div><h1>注冊頁面</h1></div>'
}
//2.定義路由：創(chuàng)建全局路由對象
var router=new VueRouter({
//路由的配置
/**
* 路由模式：
* 1.hash模式：默認(rèn)的, http://localhost:8080/#/路由路徑
* 2.history模式：http://localhost:8080/路由路徑
*
* 使用mode屬性切換路由模式
*/
mode: 'history',
//路由列表，用于存放單個(gè)路由對象的數(shù)組
routes:[
/**
* 單個(gè)路由對象用于描述路徑url與組件的對應(yīng)關(guān)系，有兩個(gè)屬性：path、component
* path: 以/開頭，路由路徑
* component: 路由路徑對應(yīng)的組件
*/
{path:'/login',component:login},
{path:'/reg',component:register},
]
})
new Vue({
el: '#app',
//3.在Vue對象中注冊路由對象
router
})
</script>
</body>
編程式路由導(dǎo)航文章來源：http://www.zghlxwxcb.cn/news/detail-422092.html
router官網(wǎng)-編程式路由導(dǎo)航
除了使用 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-422092.html
<body>
<div id="app">
<h1>歡迎使用路由導(dǎo)航</h1>
<h2>編程式導(dǎo)航</h2>
<p>
<!--開啟路由導(dǎo)航-->
<button type="button" v-on:click="doQuery('/login',10,'tom')">登陸按鈕</button>
<button type="button" v-on:click="doQuery('/reg',20,'jerry')">注冊按鈕</button>
<button type="button" v-on:click="doParams('user',30,'jack')">用戶按鈕</button>
<button type="button" v-on:click="doParams('emp',40,'lishi')">員工按鈕</button>
</p>
<router-view></router-view>
</div>
<script>
var login = {template: '<div><h1>登陸組件</h1><p>{{$route.query}}</p></div>'}
var register = {template: '<div><h1>注冊組件</h1><p>{{$route.query}}</p></div>'}
var user = {template: '<div><h1>用戶組件</h1><p>{{$route.params}}</p></div>'}
var emp = {template: '<div><h1>員工組件</h1>{{$route.params}}</div>'}
var router = new VueRouter({
mode: 'history',
routes: [
//注冊單個(gè)路由,有兩個(gè)重要的屬性：path(路由對應(yīng)的路徑)、component(路徑對應(yīng)的組件)
//下面每個(gè)大括號包裹的都是一個(gè)單個(gè)路由，在配置路由時(shí)，可以為每一個(gè)路由起一個(gè)唯一的名字(名字任意只要不重復(fù)即可)，此路由被稱為命名路由
{path: '/login', name:'login', component: login},
{path: '/reg', name:'reg', component: register},
{path:'/user', name:'user', component:user},
{path:'/emp', name:'emp', component:emp}
]
})
new Vue({
el: '#app',
//在Vue對象中注冊路由對象
router,
methods:{
doQuery(path,id,name){
/**
* 編程式導(dǎo)航傳參
* 在push或replace方法中傳入的不是路由路徑，而是一個(gè)對象，該對象有兩個(gè)重要的屬性用于接收方法中的參數(shù)
* 1.query傳參：path屬性對應(yīng)的是路徑，query屬性對應(yīng)的是參數(shù)對象
*
* 2.params傳參：name對應(yīng)路由名稱(要求路由必須為命名路由)，params參數(shù)對象.
* 特點(diǎn)：1.無需使用動態(tài)路由匹配
* 2.參數(shù)在傳遞的過程中隱藏，不會出現(xiàn)在地址欄中
*/
this.$router.push({
path: path,
query:{
id:id,
name:name
}
})
},
doParams(routeName,id,name){
this.$router.push({
name: routeName,//路由名稱，如果將name換成path，則params里面的數(shù)據(jù)獲取不到
params:{
id:id,
name:name
}
})
}
}
})
</script>
</body>
到了這里，關(guān)于Vue中的路由導(dǎo)航的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
