配置Router
用 vue-cli 創(chuàng)建的初始模板里面,沒(méi)有vue-router,需要通過(guò) npm 安裝,安裝指令 npm i vue-router -D
安裝完成后,會(huì)在 src 文件夾下,創(chuàng)建一個(gè) router 的文件夾,里面有一個(gè) index.js 的文件,
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import index from '@/components/index'//自己配置的又一個(gè)頁(yè)面
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},{
path:"/index",//自己配置的路由
component:index,
}
]
})
總結(jié): 在創(chuàng)建routes的對(duì)象中,path 配置了路由的路徑,component配置了映射的組件.
添加 mode:"history" 之后使用 HTML5
history 模式,該模式下沒(méi)有#前綴,而且 可以使用 pushState 和replaceState來(lái)管理記錄;(還沒(méi)有試驗(yàn)這個(gè)pushState和replaceState)
嵌套路由
在vue默認(rèn)的頁(yè)面中,為了加深項(xiàng)目層級(jí),App.vue只是作為一個(gè)存放組件的容器,他的頁(yè)面結(jié)構(gòu)很簡(jiǎn)單
其中<router-view></router-view>是用來(lái)渲染通過(guò)路由映射過(guò)來(lái)的組件,當(dāng)路由更改時(shí),<router-view>的內(nèi)容也會(huì)發(fā)生更改.
上面的代碼片段里面已經(jīng)配置了兩個(gè)路由,當(dāng)打開(kāi)http://localhost:8080的時(shí)候,就能再 <router-view>中渲染默認(rèn)的hello組件了.
然后我們?cè)趆ello.vue里面也寫(xiě)一個(gè)<router-view>
在index.js里面配置一個(gè)子路由.像這樣:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import index from '@/components/index'
import Login from '@/components/login.vue'
Vue.use(Router)
export default new Router({
mode:"history",
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
children:[{
path:'',
component:Login
}]
},{
path:"/index",
component:index,
}
]
})
配置一個(gè)子路由,然后主頁(yè)面就會(huì)默認(rèn)顯示一個(gè)login的子頁(yè)面
使用router-link映射路由
最常用的就是router-link了,一般用它來(lái)實(shí)現(xiàn)導(dǎo)航的功能,在編譯之后,<router-link>會(huì)被渲染為<a>標(biāo)簽,to會(huì)被渲染為href,當(dāng)<router-link>被點(diǎn)擊的時(shí)候,url會(huì)發(fā)生相應(yīng)的改變.
如果使用v-bind 指令,還可以在 to 后面接變量,配合 v-for 指令可以渲染導(dǎo)航菜單.
編程式導(dǎo)航
