1，前言
本文主要讲开发过程中需要常用的，有些api不常用，需要的时候可以自行查找文档。因为V3中没有了this，所以router4语法有所修改，模板中我们仍然可以访问$router和$route，所以不需要在setup中返回router或route
1，Router
这边主要介绍常用的跳转方法修改
2.1，跳转
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const Router = useRouter()
const to = function() {
Router.push({
name: 'About',
params: {
id: 999
}
})
}
onMounted(() => {
console.log(Router)
})
return {
to
}
}
}
2.2，打开新页面
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const Router = useRouter()
const toBlank = function() {
const Path = Router.resolve({
name: 'About',
query: {
id: '123'
}
})
window.open(Path.href, '_blank')
}
return {
toBlank
}
}
}
3，Route
这边主要讲一下如何获取路由传递的值
路由取值
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
export default {
name: 'Home',
setup() {
const Route = useRoute()
onMounted(() => {
console.log('onMounted')
console.log(Route.params.id)
console.log(Route.meta)
})
}
}
4，守卫
4.1，onBeforeRouteLeave
可以替代组件内守卫，新增的组合式Api，离开当前页面路由时触发，return false则阻止跳转
import { onBeforeRouteLeave } from 'vue-router'
export default {
setup() {
onBeforeRouteLeave((to, from) => {
if (to.name !== 'home') {
return false
}
})
}
}
4.2，onBeforeRouteUpdate
新增的组合式Api，路由更新时触发
import { onBeforeRouteUpdate } from 'vue-router'
export default {
setup() {
onBeforeRouteUpdate((to, from) => {
if (to.params.id !== from.params.id) {
console.log('......')
}
})
}
}
4.3，路由守卫语法
// 原写法
Router.beforeEach((to, from, next) => {
if (ok) {
next()
} else {
next(false)
}
})
// 新写法
Router.beforeEach((to, from) => {
if (ok) {
console.log('...')
} else {
return false
}
})
5，重要变更
使用
createRouter替换new Router()mode: 'history'选项替换为更灵活的名称history
| Router3 | Router4 |
|---|---|
| history | createWebHistory() |
| hash | createWebHashHistory() |
| abstract | createMemoryHistory() |
base选项移除，修改为createWebHistory等方法的第1个参数传递transition和keep-alive必须放在router-view里面删除
<router-link>中的event和append和tag属性router.onReady()函数已被router.isReady()取代删除
router.match改为router.resolve所有的导航现在都是异步的，如果使用
transition，需要等待路由ready好后再挂载程序带有空
path的命名子路由不再添加斜线
如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END
PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦
往期文章
个人主页
