安装

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(),
    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"})
}