Vue3中如何安装和配置静态路由

1.安装vue-router

pnpm   i  vue-router 

2.在src下闯将router目录，在它下边再建一个index.ts,用来创建路由和配置静态路由（静态路由就是不管哪个用户都会有的路由页面，比如，登陆页面，主页面，404页面，以及如果匹配到没有的路由重定向到404的配置）

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


let router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            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: 'Any'
        },
        {
            path: '/:pathMatch(.*)*',//如果匹配到没有的路由，则重定向到404页面
            redirect: '/404'
        }

    ],
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
})


export default router;

3.再main.ts中引入配置好的路由

import router from '@/router/index'

app.use(router)

到这里就配置好了，如果想实现路由跳转，只需要在跳转的父组件的位置写上router-view标签，引入useRouter函数，在引入的最上方获取router对象，通过它的push方法即可实现路由跳转

import {useRouter}  from 'vue-router'

let route=useRouter();


route.push('/')