Vue3中路由(router)的使用

首先安装插件

pnpm install vue-router

然后在项目的router目录下创建index.js文件，在其中编写路由的具体代码，并导出。

例如：

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

const routers=[
    {
        path: '/login',
        component: ()=>import('@/views/login/index.vue'),//动态导入
        name: 'login'
    },
    {
        path: '/',
        component: ()=>import('@/views/home/index.vue'),
        name: 'layout'
    },
    {
        path: '/404',
        component: ()=>import('@/views/404/index.vue'),
        name: '404'
    },
    {
        path: '/:pathMatch(.*)*',//不符合上面的请求路径，统一重定向到/404对应的页面
        redirect: '/404',
        name: 'Any'
    }
]

const router=createRouter({
    history:createWebHistory(),
    routes:routers,
    scrollBehavior(){//添加滚动效果，非必须
        return{
            left:0,
            top:0
        }
    }
})

export default router

在main.js中导入创建路由的js文件，并调用实例的use方法使用路由器

import router from '@/router'

const app = createApp(App)
app.use(router)

在App.vue文件的template标签中，定义router-view标签

<template>
  <router-view></router-view>
</template>

在script中进行跳转

import {useRouter} from 'vue-router'
const router=useRouter()
router.push('/404')