1.vue-router相當(dāng)于vue的第三方數(shù)據(jù)庫(kù)。
用處1.通過(guò)不同的url訪問不同的頁(yè)面筷畦，實(shí)現(xiàn)spa(singlepageapplication)單頁(yè)面應(yīng)用败匹。下載：npminstallvue-router引用：先引用vue.js在引用vue-router.js
2.路由的建立步驟
<!DOCTYPE html>Document.active{color: red }首頁(yè)詳情頁(yè)/* 2.創(chuàng)建組件*/varHome={template:`
<h1>我是首頁(yè)的內(nèi)容</h1>
`}varDetail={template:`
<h1>我是詳情頁(yè)的內(nèi)容</h1>
`}/*3.配置路由*/constroutes=[ {path:"/",component:Home}, {path:"/home",component:Home}, {path:"/detail",component:Detail} ]/* 4.創(chuàng)建路由實(shí)例*/constrount=newVueRouter({routes:routes,linkActiveClass:"active"http://默認(rèn)：linkActiveClass})/*5.把路由掛到vue的實(shí)例上*/newVue({el:"#app",router:rount })
3.路由的嵌套
<!DOCTYPE html>Document.active{color: red }首頁(yè)詳情頁(yè)/* 2.創(chuàng)建組件*/varHome={template:`
<h1>我是首頁(yè)的內(nèi)容</h1>
`}varDetail={template:`
<div>
<h1>我是詳情頁(yè)的內(nèi)容</h1>
<ul>
<li>
<router-link to="/detail/deng">登錄</router-link>
</li>
<li>
<router-link to="/detail/zhu">注冊(cè)</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`}varDeng={template:`
<h1>這是登錄頁(yè)面</h1>
`}varZhu={template:`
<h1>這是注冊(cè)頁(yè)面</h1>
`}/*3.配置路由*/constroutes=[ {path:"/",component:Home}, {path:"/home",component:Home}, {path:"/detail",component:Detail,children:[ {path:"deng",component:Deng}, {path:"zhu",component:Zhu} ] } ]/* 4.創(chuàng)建路由實(shí)例*/constrount=newVueRouter({routes:routes,linkActiveClass:"active"http://默認(rèn)：linkActiveClass})/*5.把路由掛到vue的實(shí)例上*/newVue({el:"#app",router:rount })
4.路由的傳參
我是首頁(yè)的內(nèi)容
} var Detail={ template:
我是詳情頁(yè)的內(nèi)容
登錄
注冊(cè)
} var Deng={ template:
這是登錄頁(yè)面
{{$route.query}}以對(duì)象的形式輸出
{{$route.query.uname}}
} var Zhu={ template:
這是注冊(cè)頁(yè)面
{{$route.params}}以對(duì)象的形式輸出
{{$route.params.name}}
` } /3.配置路由/ const routes=[ {path:"/",component:Home}, {path:"/home",component:Home}, { path:"/detail", component:Detail, children:[ {path:"deng",component:Deng}, {path:"zhu/:name/:age",component:Zhu} ] } ] /* 4.創(chuàng)建路由實(shí)例/ const rount=new VueRouter({ routes:routes, linkActiveClass:"active"http://默認(rèn)：linkActiveClass }) /5.把路由掛到vue的實(shí)例上*/ new Vue({ el:"#app", router:rount })
