Vue从2.0到3.0的踩坑之路（二）使用vue-routerVue3使用的vue-router版本为4，所以安装的时候

安装

Vue3使用的vue-router版本为4，所以安装的时候需要加上@next。

使用yarn

yarn add vue-router@next

使用npm

npm i vue-router@next - S

vue-router的Vue3版本需要导入新的方法，其中主要用到的是createRouter()，createWebHistory()和createWebHashHistory()。

createRouter()相当于之前的new VueRouter()，用来创建路由。

createWebHistory()用来设置路由为history模式，createWebHashHistory()则设置路由为哈希模式，相当于老版本的mode设置。

import {createRouter, createWebHistory} from "vue-router"

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes: [
        {
            path: "/home",
            name: "Home",
            component: () => import("../views/Home/Home.vue"),
        }
    ]
})

export default router

在vue组件内使用

首先在组件内引用useRoute()和useRouter()这两个方法。

import {useRoute, useRouter} from "vue-router";

userRoute()相当于之前的 $route,用来获取路由信息，userRouter()相当于之前的$ router，用来进行跳转的操作。

setup(){
    let $route = useRoute()
    let $router = useRouter()

    // 获取路由信息
    console.log($route)
    // 路由跳转
    $router.push({name: "Home"})
}

以上内容为个人学习整理，如果有错误欢迎指正哈！