Vue-router
- 通過控制哈希值控制頁面的切換
基本使用
-
導(dǎo)入
<script src="js/vue-router.js"></script> -
Vue實(shí)例掛載模板的內(nèi)容
<div id="app"> <!-- 1.默認(rèn)情況下router-link最終會被渲染a標(biāo)簽 2.可以通過tag屬性更改渲染之后的標(biāo)簽 3.通過to屬性，指定點(diǎn)擊之后跳轉(zhuǎn)的哈希值--> <router-link to="/one" tag="button">one</router-link> <router-link to="/two" tag="button">two</router-link> <!-- 1.組件會在router-view出口位置渲染顯示--> <router-view></router-view> </div> -
創(chuàng)建組件
<template id="one"> <div> <p>我是one</p> </div> </template> <template id="two"> <div> <p>我是two</p> </div> </template> -
進(jìn)行組件配置
/* 1.Vue實(shí)例和Vue-router實(shí)例的規(guī)則需要掛載相同組件配置,為了減少代碼的冗余度，將組件的配置單獨(dú)拿出來 */ const one = { template: "#one" } const two = { template: "#two" } -
定義路由規(guī)則
const routes = [ /* 1.一個對象就是一條規(guī)則，在對象里面通過path屬性指定對應(yīng)的地址， 2.在component屬性注冊組件 */ { path: '/one', // 綁定組件 component: one }, { path: '/two', // 綁定組件 component: two }, // 也通過redirect指定默認(rèn)開始的哈希值 { path: '/', redirect: '/one'}, ] -
創(chuàng)建路由對象
const router = new VueRouter({ // 在路由對象上注冊規(guī)則 routes: routes, // 通過linkActiveClass自定義激活狀態(tài)下的類名 linkActiveClass: "nj-active" }) -
在Vue實(shí)例上綁定vue-router的實(shí)例對象
new Vue({ el: '#app', // 綁定路由對象 router: router, components:{ // 綁定組件 one: one, two: two }, });
Vue-router數(shù)據(jù)傳遞
<template id="one">
<div>
<p>我是one</p>
</div>
</template>
<template id="two">
<div>
<p>我是two</p>
</div>
</template>
-
通過url傳遞參數(shù)
<div id="app"> <router-link to="/one" tag="button">one</router-link> <!--可通過url后面以key=value的形式進(jìn)行傳遞數(shù)據(jù)（get請求傳遞參數(shù)的方式）--> <router-link to="/two?name=lnj&age=33" tag="button">two</router-link> <router-view></router-view> </div>const one = { template: "#one", } const two = { template: "#two", // 通過生命周期方法created函數(shù)中拿到數(shù)據(jù) created: function () { // 如果通過url方式傳參，則通過路由的實(shí)例對象的query拿到數(shù)據(jù) console.log(this.$route.query.name); console.log(this.$route.query.age); } } const routes = [ { path: '/', redirect: '/one'}, { path: '/one, component: one }, { path: '/two', component: two }, ] const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }) new Vue({ el: '#app', router: router, components:{ one: one, two: two }, }); -
通過在路由規(guī)則的path屬性上留坑傳遞參數(shù)
<div id="app"> <!--在頁面跳轉(zhuǎn)就可以傳遞key1和key2的value值--> <router-link to="/one/zs/66" tag="button">one</router-link> <router-link to="/two" tag="button">two</router-link> <router-view></router-view> </div>const one = { template: "#one", created: function () { // 如果通過路由規(guī)則上挖坑則需要使用params獲取數(shù)據(jù) console.log(this.$route.params.name); console.log(this.$route.params.age); } } const two = { template: "#two", } const routes = [ { path: '/', redirect: '/one'}, /* 1.在路由規(guī)則的path屬性上留坑 格式: path: '/哈希地址/:key1/:key2' */ { path: '/one/:name/:age', component: one }, { path: '/two', component: two }, ] const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }) new Vue({ el: '#app', router: router, components:{ one: one, two: two }, });
嵌套路由
<template id="one">
<div>
<p>我是one</p>
<!--路由的子界面切換需要在該父組件中router-link的to屬性，繼續(xù)綁定延申的哈希地址-->
<router-link to="/one/onesub1" tag="button">onesub1</router-link>
<router-link to="/one/onesub2" tag="button">onesub2</router-link>
<router-view></router-view>
</div>
</template>
<template id="onesub1">
<div>
<p>我是one子界面1</p>
</div>
</template>
<template id="onesub2">
<div>
<p>我是one子界面2</p>
</div>
</template>
<template id="two">
<div>
<p>我是two</p>
</div>
</template>
<div id="app">
<router-link to="/one" tag="button">one</router-link>
<router-link to="/two" tag="button">two</router-link>
<router-view></router-view>
</div>
const onesub1 = {
template: "#onesub1",
}
const onesub2 = {
template: "#onesub2",
}
const one = {
template: "#one",
// 在父組件中繼續(xù)掛載子組件
component: {
onesub1: onesub1,
onesub2: onesub2
}
}
const two = {
template: "#two",
}
const routes = [
{ path: '/', redirect: '/one'},
{
path: '/one',
component: one,
// 在父組件的路由規(guī)則中，通過children屬性繼續(xù)配置子組件切換的路由規(guī)則
children: [
// 在進(jìn)行子組件的路由規(guī)則配置時，地址可不需要加上【/】
{ path: "onesub1", component: onesub1 },
{ path: "onesub2", component: onesub2 }
]
},
{ path: '/two', component: two, },
]
const router = new VueRouter({
routes: routes,
linkActiveClass: "nj-active"
})
new Vue({
el: '#app',
router: router,
components:{
one: one,
two: two
},
});
路由出口的命名
一個路由出口會在對應(yīng)的路由地址上顯示一個組件，多個出口就會顯示多個組件
-
可以指定出口名字和相應(yīng)的路由組件
<div id="app"> <!--通過name屬性給路由出口綁定名字--> <router-view name="name1"></router-view> <router-view name="name2"></router-view> </div><template id="one"> <div> <p>我是one</p> </div> </template> <template id="two"> <div> <p>我是two</p> </div> </template>const one = { template: "#one" } const two = { template: "#two" } const routes = [ { path: '/', /* 1.在同一路由地址上，對路由出口根據(jù)不同的名稱顯示不同的組件，需要將component屬性變成components 2. components綁定一個對象，對象以keyvalue的形式指定在對應(yīng)key的對應(yīng)的組件*/ components: { name1: one, name2: two } }, ] const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }) new Vue({ el: '#app', router: router, components:{ one: one, two: two }, });
