组合式函数的基本使用
选项式都是this.$router.push()
的方式,组合式是
import { useRouter, useRoute } from 'vue-router'
//要在外面定义,在函数里面定义无法识别的
const router = useRouter()
const route = useRoute()
const test = () =>{
console.log(router)
console.log(route.query)
router.push({name:'about'})
// router.push({name:'about'})
}
这样就和选项式的一样了
router view
这个老熟悉了,现在可以一个组件多个router view。 https://router.vuejs.org/zh/guide/essentials/named-views.html
但现在一般都是只有一个router view就可以了
横跨历史
router.go(1)
router.replace({ path: ‘/home’ })
老熟悉了
导航守卫
前置守卫
/**
* to: 即将进入的目标
* from: 正要离开的路由
*/
//可以加第三个参数,next,但是不推荐,推荐用return true
router.beforeEach((to,form) => {
console.log(to)
console.log(form)
return true
})
或者可以return到一个页面
router.beforeEach((to,form) => {
//记得要加判断条件,不然已经跳到了还要跳,就无限循环了
if (to.name === 'home'){
return {name:'about'}
}
})
全局解析守卫
每一次导航都会被触发的函数
router.beforeResolve(to => {
console.log("每次都会出发的")
})
全局后置钩子
刚才的是前置,这个是后置。
后置可以对一些页面做分析,改标题等辅助作用
router.afterEach((to,form)=>{
})
路由独享守卫
就是针对某一个路由,在跳转之前,他想做的事情
const routes = [
{
path: '/users/:id',
component: UserDetails,
// 独享守卫
beforeEnter: (to, from) => {
return false
},
},
]
或者
function removeQueryParams(to) {
if (Object.keys(to.query).length)
return { path: to.path, query: {}, hash: to.hash }
}
function removeHash(to) {
if (to.hash) return { path: to.path, query: to.query, hash: '' }
}
const routes = [
{
path: '/users/:id',
component: UserDetails,
//数组的形式添加函数
beforeEnter: [removeQueryParams, removeHash],
},
{
path: '/about',
component: UserDetails,
beforeEnter: [removeQueryParams],
},
]
在组件内使用守卫
就是在js中可以使用守卫
import { onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'
onBeforeRouteUpdate((to,from)=>{
})
onBeforeRouteLeave((to,from)=>{
})
路由元信息
就是非常熟悉的meta,在写路由的时候添加一常量
const routers = [
{
path: 'main',
name: 'Main',
component: () => import('@/views/Main/Index'),
meta:{
title: '标题',
doucumentTitle:'测试标题',
keepAlive: true,
}
},
]
用的时候就可以to.meta.xxx
滚动行为
在创建router示例的时候,加个scrollBehavior
方法
const router = createRouter({
history: createWebHashHistory(),
routes: [...],
//路由跳转,回到顶部
//to准备去的页面,from先前的页面,savedPosition是按下后退/前进按钮的时候
scrollBehavior(to, from, savedPosition) {
// 如果是按下按钮后退或者前进,就不进行滚轮
if (savedPosition) {
return savedPosition
} else {
return {top: 0}//回到顶部,
// 或者也可以相对于某个元素的位置
// return {
// el: '#main',
// top: -10,
// }
}
},
})