助你上手Vue3全家桶之Vue-Router4教程

1，前言

---

本文主要讲开发过程中需要常用的，有些api不常用，需要的时候可以自行查找文档。因为V3中没有了this，所以router4语法有所修改，模板中我们仍然可以访问$router和$route，所以不需要在setup中返回router或route

Vue-Router4.0官网

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里面

• 删除中的event和append和tag属性

• router.onReady()函数已被router.isReady()取代

• 删除router.match改为router.resolve

• 所有的导航现在都是异步的，如果使用transition，需要等待路由ready好后再挂载程序

• 带有空path的命名子路由不再添加斜线

---

如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END

PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦

往期文章

• 助你上手Vue3全家桶之Vue3教程

• 助你上手Vue3全家桶之VueX4

• 超详细！Vuex手把手教程

• 使用nvm管理node.js版本以及更换npm淘宝镜像源

• 超详细！Vue-Router手把手教程

• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

• 微信小程序实现搜索关键词高亮

个人主页

• CSDN
• GitHub
• 博客园
• 掘金