Vue中的路由 Router
Vue Router 是 Vue.js 官方的路由管理器阅悍。它和 Vue.js 的核心深度集成鸡典，讓構(gòu)建單頁面應(yīng)用變得易如反掌俩滥。
單頁應(yīng)用SPA
所謂單頁應(yīng)用眠副，指的是在一個頁面上集成多種功能肪康，甚至整個系統(tǒng)就只有一個頁面尼斧，所有的業(yè)務(wù)功能都是它的子模塊姜贡，通過特定的方式掛接到主界面上。它是AJAX技術(shù)的進一步升華棺棵，把AJAX的無刷新機制發(fā)揮到極致楼咳，因此能造就與桌面程序媲美的流暢用戶體
單頁應(yīng)用SPA 實現(xiàn)
頁面切換：瀏覽器地址欄哈希值控制隱藏顯示div
頁面加載：通過ajax動態(tài)獲取
路由視圖結(jié)構(gòu)
存放頁面 <router-view>
切換路由 <router-link>
路由配置
{
path: '/about', // 路由連接地址 和router-link to值對應(yīng)
name: 'Home', // 路由的名稱
component: Home
// 路由頁面使用的組件被填充的router-view里面的組件
},
路由參數(shù)配置
-
動態(tài)路徑參數(shù)
// 配置
{
path:“/produce/:id”
name:"produce"
component:Produce
}
// 跳轉(zhuǎn)鏈接
<router-link to="/produce/123">Go</router-link>
/*
:id就是給路由配置的參數(shù)
當(dāng)匹配到一個路由時，參數(shù)值會被設(shè)置到 this.route.params.id獲取參數(shù)
*/ -
查詢字符串參數(shù)
<router-link to="/produce?id=123">Go</router-link>
router和route區(qū)別
- $route
- Object類型對象
- 內(nèi)部有params 第一種路由傳參 /detail/:id /detail/101 this.$route.params.id
- query 路由傳參 第二種 ?redirect=carts this.$route.query.redirect
- path 路由路徑
- meta 路由攜帶數(shù)據(jù) { meta:{ auth:true,name:aiva } }
- $router 一個VUE的路由對象
- this.$router.push(“目標路由”)
- this.$router.go(-1) 回退
路由導(dǎo)航
-
router.push
push方法會向 history 棧添加一個新的記錄烛恤，所以母怜，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL
該方法的參數(shù)可以是一個字符串路徑缚柏，或者一個描述地址的對象// 字符串
router.push('home')// 對象
router.push({ path: 'home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 帶查詢參數(shù)苹熏，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }}) -
router.replace
router.replace跟 router.push 很像，唯一的不同就是币喧，它不會向 history 添加新記錄轨域，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。this.$router.replace("home")
-
router.go
這個方法的參數(shù)是一個整數(shù)杀餐，意思是在 history 記錄中向前或者后退多少步干发，類似 window.history.go(n)。this.$router.go(1) // 前進1步 this.$router.go(-1) // 后退1步
跳轉(zhuǎn)
<router-link to=/home">首頁</router-link>
<router-link :to="{ path: 'home' }">Home</router-link>
<router-link :to="{ name: 'produce', params: { id: 123 }}">
產(chǎn)品123
</router-link>
重定向
{ path: '/home', redirect: '/' }
別名
{ path: '/a', component: A, alias: '/b' }
404
{path: '*'// 會匹配所有路徑}
路由高亮
.router-link-active
全局配置 <router-link> 默認的激活的 class
.router-link-exact-active
全局配置當(dāng)鏈接被精確匹配的時候應(yīng)該激活的 class
路由嵌套
路由可以嵌套史翘，一個被渲染路由組件同樣可以包含自己的嵌套 <router-view>
-
要在嵌套的出口中渲染組件枉长，需要在 VueRouter 的參數(shù)中使用 children 配置
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 當(dāng) /user/:id/profile 匹配成功，
// UserProfile 會被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 當(dāng) /user/:id/posts 匹配成功
// UserPosts 會被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意琼讽，以 / 開頭的嵌套路徑會被當(dāng)作根路徑必峰。嵌套的路由不需要使用'/'
路由權(quán)限控制
beforeEach（） 全局前置守衛(wèi) 進入前調(diào)用
afterEach（） 全局后置鉤子 進入后調(diào)用
每個守衛(wèi) 三個參數(shù)：
- to: Route: 即將要進入的目標 路由對象
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: 一定要調(diào)用該方法來路由才會切換。
- next() 直接進入下個路由
- next(false) 路由回到from頁面
- next('/') 路由跳轉(zhuǎn)到首頁
路由元信息
給路由配置額外的信息
{ path:"/cart",
...
meta:{requireAuth:true}
}
// $route.meta.requireAuth 獲取
組件內(nèi)部守衛(wèi)
beforeRouteEnter 進入前 （沒有this）
beforeRouteUpdate 參數(shù)更新是
-
beforeRouteLeave 路由離開前
const Foo = {
template:...,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
// 不钻蹬！能自点！獲取組件實例this
// 因為當(dāng)守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當(dāng)前路由改變脉让，但是該組件被復(fù)用時調(diào)用
// 舉例來說桂敛，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候溅潜，
// 由于會渲染同樣的 Foo 組件术唬，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用滚澜。
// 可以訪問組件實例this
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
// 可以訪問組件實例this
}
}
路由過渡
<transition>
<router-view></router-view>
</transition>
組件緩存
<keep-alive>
<router-view v-if="$route.meta.keep" />
</keep-alive>
<router-view v-if="!$route.meta.keep" />
路由懶加載
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
