现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。
安装注册
vue2配合vue-router3代码是这样的。https://router.vuejs.org/zh/guide/#javascript
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
mode: 'hash', // 默认 hash 模式
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！vue3配合vue-router4代码是这样的。https://next.router.vuejs.org/guide/#javascript
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = VueRouter.createRouter({
// 4. 通过 createWebHashHistory() 创建 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // (缩写) 相当于 routes: routes
})
// 5. 创建和挂载根实例。
const app = Vue.createApp({})
// 记得要通过 use 配置参数注入路由，
// 从而让整个应用都有路由功能
app.use(router)
app.mount('#app')
// 现在，应用已经启动了！现在 npm 网站上发布的是 4.0.0-rc.5 版本，后缀是 -rc ，这个代表的是发布正式版本前的预览版本，和正式的版本很接近了；
除了上面说到的挂在方式不同，之前是在 vue 上配置 router 属性为路由实例，现在是通过 use 方法配置。
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。
// Home.vue
export default {
computed: {
username() {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}
}
}在 setup() 内部，this 不会是该活跃实例的引用，所以如果是在 setup 函数中，需要使用 useRouter 或 useRoute 函数。
export default {
setup() {
const router = useRouter()
const route = useRoute()
function pushWithQuery(query) {
router.push({
name: 'search',
query: {
...route.query,
},
})
}
},
}导航守卫
之前 vue-router 3 组件内的守卫，你可以在路由组件内直接定义以下路由导航守卫：
1、beforeRouteEnter
2、beforeRouteUpdate (2.2 新增)
3、beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}升级到了 vue-router4 的时候，由于使用 Composition API 的原因，setup 函数里面可以使用 onBeforeRouteLeave 和 onBeforeRouteUpdate 两个新增的 API 代替。
useLink
router-link 通过一个作用域插槽暴露底层的定制能力。
<router-link
to="/foo"
v-slot="{ href, route, navigate, isActive, isExactActive }"
>
<li
:class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
>
<a :href="href" @click="navigate">{{ route.fullPath }}</a>
</li>
</router-link>插槽 prop 的对象包含下面几个属性：
1、href：解析后的 URL。将会作为一个 a 元素的 href attribute。
2、route：解析后的规范化的地址。
3、navigate：触发导航的函数。会在必要时自动阻止事件，和 router-link 同理。
4、isActive：如果需要应用激活的 class 则为 true。允许应用一个任意的 class。
5、isExactActive：如果需要应用精确激活的 class 则为 true。允许应用一个任意的 class。
使用 useLink 和 v-slot API 相同，返回的都是相同的属性。
API变更
关于 Composition API 的说明：
1、useRouter
2、useRoute
3、onBeforeRouteLeave
4、onBeforeRouteUpdate
5、useLink
