安裝vue-router
cnpm i vue-router -S
image.png
GoodsList.vue
<template>
<div>
<h1>這是 GoodsList 組件</h1>
</div>
</template>
Account.vue
<template>
<div>
<h1>這是 Account 組件</h1>
</div>
</template>
main.js
// 注意：這里導(dǎo)入的Vue功能不完整，并沒(méi)有提供像網(wǎng)頁(yè)中使用那樣的全部功能
import Vue from 'vue'
// 導(dǎo)入App組件
import App from './App.vue'
// 1.導(dǎo)入VueRouter包
import VueRouter from 'vue-router'
// 2.手動(dòng)安裝VueRouter
Vue.use(VueRouter)
// 導(dǎo)入組件模塊
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 3.創(chuàng)建路由對(duì)象
const router = new VueRouter({
routes : [
// account goodlist
{path : '/account',component : account},
{path : '/goodslist',component : goodslist},
]
})
var vm = new Vue({
el : '#app',
data : {},
// 注意：這里不要使用components注冊(cè)組件，選擇使用render函數(shù)
render : c => c(App),
router,// 4.將router對(duì)象賦給vm實(shí)例
})
注意：路由路徑匹配規(guī)則以為著有 router-link和router-view，那么它們?cè)谀睦锬兀?br>
因?yàn)槲覀兪褂胷ender函數(shù)將App.vue組件渲染進(jìn)了index.html中的<div id="app"></div>中，App.vue會(huì)覆蓋<div id="app"></div>中寫的所有內(nèi)容，所以我們只需要在App.vue中補(bǔ)寫切換組件代碼即可
App.vue
<template>
<div>
<h1>這是 App 組件</h1>
<router-link to="/account">account組件</router-link>
<router-link to="/goodslist">account組件</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
運(yùn)行cnpm run dev查看
webpack實(shí)現(xiàn)子路由
準(zhǔn)備自組件
image.png
Login.vue
<template>
<div>
<h3>這是 Account -- 登錄 子組件</h3>
</div>
</template>
Register.vue
<template>
<div>
<h3>這是 Account -- 注冊(cè) 子組件</h3>
</div>
</template>
Account.vue
<template>
<div>
<h1>這是 Account 組件</h1>
<router-link to="/account/login">登錄</router-link>
<router-link to="/account/register">注冊(cè)</router-link>
<router-view></router-view>
</div>
</template>
main.js
// 注意：這里導(dǎo)入的Vue功能不完整，并沒(méi)有提供像網(wǎng)頁(yè)中使用那樣的全部功能
import Vue from 'vue'
// 導(dǎo)入App組件
import App from './App.vue'
// 1.導(dǎo)入VueRouter包
import VueRouter from 'vue-router'
// 2.手動(dòng)安裝VueRouter
Vue.use(VueRouter)
// 導(dǎo)入組件模塊
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 導(dǎo)入自組件
import login from './subcomponents/Login.vue'
import register from './subcomponents/Register.vue'
// 3.創(chuàng)建路由對(duì)象
const router = new VueRouter({
routes : [
// account goodlist
{
path : '/account',
component : account,
children : [
{ path : 'login' , component : login},
{ path : 'register' , component : register},
]
},
{path : '/goodslist',component : goodslist},
]
})
var vm = new Vue({
el : '#app',
data : {},
// 注意：這里不要使用components注冊(cè)組件，選擇使用render函數(shù)
render : c => c(App),
router,
})
運(yùn)行cnpm run dev查看
樣式style的處理
<template>
<div>
<h3>這是 Account -- 登錄 子組件</h3>
</div>
</template>
<style scoped lang="sass"> /* scoped的意思是 樣式 只作用于當(dāng)前組件，lang的意思是語(yǔ)言，因?yàn)槌薱ss還有sass等語(yǔ)法 */
div{
color:red;
}
</style>
抽離路由模塊
現(xiàn)在在我們的項(xiàng)目中main.js比較龐雜，我們應(yīng)該把路由部分抽離成單獨(dú)的js文件
image.png
router.js
import VueRouter from 'vue-router'
// 導(dǎo)入組件模塊
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 導(dǎo)入自組件
import login from './subcomponents/Login.vue'
import register from './subcomponents/Register.vue'
// 3.創(chuàng)建路由對(duì)象
const router = new VueRouter({
routes : [
// account goodlist
{
path : '/account',
component : account,
children : [
{ path : 'login' , component : login},
{ path : 'register' , component : register},
]
},
{path : '/goodslist',component : goodslist},
]
})
export default router // 將router對(duì)象暴露出去
main.js
// 注意：這里導(dǎo)入的Vue功能不完整，并沒(méi)有提供像網(wǎng)頁(yè)中使用那樣的全部功能
import Vue from 'vue'
// 導(dǎo)入App組件
import App from './App.vue'
// 1.導(dǎo)入VueRouter包
import VueRouter from 'vue-router'
// 2.手動(dòng)安裝VueRouter
Vue.use(VueRouter)
// 導(dǎo)入router模塊
import router from './router.js'
var vm = new Vue({
el : '#app',
data : {},
// 注意：這里不要使用components注冊(cè)組件，選擇使用render函數(shù)
render : c => c(App),
router,
})
