1，前言

1，Router

2.1，跳转

2.2，打开新页面

3，Route

4，守卫

4.1，onBeforeRouteLeave

4.2，onBeforeRouteUpdate

4.3，路由守卫语法

5，重要变更

本文主要讲开发过程中需要常用的，有些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
    }
})