一不撑、安裝
npm install vue vue-router
二怪嫌、使用
在項(xiàng)目src下新建router文件夾扑毡，然后創(chuàng)建index.js有送，import所需的模塊淌喻，Vue.use()使用插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
先創(chuàng)建一個(gè)路由映射routes
import Home from 'src/components/Home'
const routes = [
{ //配置默認(rèn)路由
path: '',
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: {
title: '首頁(yè)'
},
children: [ //創(chuàng)建子路由
{
path: 'child1',
component: HomeChild1，
},
{
path: 'child2',
component: HomeChild2雀摘，
}
]
},
{
path: '/about',
component: () => import 'src/components/About', //懶加載裸删，打包會(huì)獨(dú)自生成一份js文件
meta: {
title: '關(guān)于'
},
},
{
path: '/user/:id', //帶占位符 id 的路由
component: () => import 'src/components/User',
meta: {
title: '用戶'
},
}
]
然后將路由映射routes掛載到VueRouter的實(shí)例對(duì)象router上
const router = new VueRouter({
routes, //掛載路由映射
mode: 'history', //設(shè)置路由模式，默認(rèn)是hash
linkActiveClass: 'active', //將router-link的活躍狀態(tài)下的類改為'active'
linkExactActiveClass: 'acive' //只有一個(gè)link顯示樣式阵赠，上面存在2個(gè)顯示的可能
})
//前置守衛(wèi)
router.beforeEach((to,from,next) => {
//to 代表路由的目標(biāo)route對(duì)象涯塔，from 代表起始路由route對(duì)象
document.title = to.matched[0].meta.title //使用全局導(dǎo)航守衛(wèi)修改 title
next() //必須調(diào)用
})
//后置鉤子
router.afterEach((to,from) => {
//to 代表路由的目標(biāo)route對(duì)象，from 代表起始路由route對(duì)象
console.log('完成了路由跳轉(zhuǎn)')
})
最后清蚀，向外暴露router對(duì)象
export default router
三匕荸、router標(biāo)簽
路由參數(shù)傳遞
在當(dāng)前路由組件，使用this.$route.params.占位符變量 獲取路由占位符的數(shù)據(jù)
<router-link>的to屬性可以是對(duì)象{path:'/home',query:{name:'zhangsan'}}攜帶query參數(shù)路由/?name=zhangsan
使用 this.$route.query 獲取query的參數(shù)數(shù)據(jù)
router-view & router-link
在App.vue中的使用需要使用<router-view>來(lái)展現(xiàn)路由的頁(yè)面枷邪，<router-link>來(lái)實(shí)現(xiàn)路由切換
<router-link>中的屬性:
-
to = "/home"跳轉(zhuǎn)到/home的位置 -
tag = "button"把<router-link>渲染成button標(biāo)簽榛搔，默認(rèn)是a標(biāo)簽 -
replace使用replace的方式不會(huì)留下history記錄，不能用瀏覽器前進(jìn)后退，默認(rèn)是push的方式 -
active-class = "active"元素處于活躍狀態(tài)下的樣式類class為active践惑，默認(rèn)樣式類是router-link-active
keep-alive
keep-alive會(huì)緩存頁(yè)面绑洛，不會(huì)重復(fù)的創(chuàng)建銷毀，兩個(gè)屬性:
-
include="組件name,..."正則或字符串 對(duì)某些組件進(jìn)行緩存 -
exclude="組件name,..."正則或字符串 排除某些組件不進(jìn)行緩存
被keep-alive包裹router-view的route才會(huì)觸發(fā)activated童本、deactivated生命周期的回調(diào)
<keep-alive>
<router-view/>
</keep-alive>
使用代碼跳轉(zhuǎn)路由
main.js
//main.js
import Vue from 'vue'
import App from './App'
import router from 'src/router'
new Vue({
el:'#app',
router,
render: h => h(App)
data: {},
components: {},
methods: {},
computed: {},
watch: {}
})
App.vue
//App.vue
<template>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<button @click="tohome">Home(代碼方式)</button>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
data() {
return {} //子組件的data必須用工廠函數(shù)返回
},
components: {},
methods: {
tohome() {
this.$router.push('/home') //push方式
//this.$router.replace('/home') //replace方式
}
},
computed: {}
}
</script>
<style scoped>
</style>
