第一步: 安裝? ?sudo? npm? install? vue-router? --save
第二步:在src文件夾下新建router文件夾,里面專門用來存放路由相關(guān)的內(nèi)容,(主要是為了代碼的結(jié)構(gòu)清晰,避免main.js過于臃腫)
第三步;在main.js文件里引用router
第四步:在components文件夾下創(chuàng)建Cat,Dog倆個組件(用來做路由切換),同時也創(chuàng)建Type1和Type2兩個組件,作為Dog的子路由
第五步:在App.vue文件下,在template便簽內(nèi),引用<router-view></router-view>標(biāo)簽,用來顯示路由的組件,<router-link></router-link>標(biāo)簽 用來路由之間的跳轉(zhuǎn)
第六步:配置好 router / index.js
補(bǔ)充:
? 1.? 路由跳轉(zhuǎn)的時候,可以增加css樣式
????????????系統(tǒng)默認(rèn)會在當(dāng)前的路由加上.router-link-active的類名,可以直接在App.vue文件/style標(biāo)簽里面,設(shè)置.router-link-? ?active{backdtound:red},?
????????????如果感覺類名太長,也可以自己設(shè)置,? ?方法: 在router/index.js中,routes數(shù)組的同級加上linkActiveClass:"active",屬性,那么在App.vue里就可以直接用.active
2.? ?如果jquery和路由沖突,解決方法--------安裝jquery
? ? ? ? a,? ?安裝jq? ?npm? install? jquery? --save
? ? ? ? b,? ?在main.js中引入? ?import? $? from? 'jquery'
? ? ? ? c,? ?在build.webpack.dev.conf.js中,plugings數(shù)組中加入
? ??????????????new webpack.ProvidePlugin({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jQuery: "jquery",
? ? ? ? ? ? ? ? ? ? ? ? ????????? $: "jquery"
? ????? })
? ? ? ? 重新啟動項目? npm run dev?
3,編程式路由
????????<button @click="jumpCat">點擊我跳轉(zhuǎn)到貓路由</button>
? ? ? ? methods中寫上jumpCat方法
????????????????jumpCat( ){
? ? ????????????????this.$router.push({
????????????????????????????????path:'/cat'
????????????????????})
? ? ? ? ?}
