vue3 vue-router4安装和基础使用

前提：我的vue3是结合ts的

1、安装

// 用这个命名安装router4版本，
// 不要用npm install vue-router，这个是安装router3版本的

npm install vue-router@4

2、在src文件下新建一个router文件夹，然后在这下面新建一个index.ts文件

// createWebHashHistory 是hash模式就是访问链接带有#
// createWebHistory  是history模式
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// 引入文件，动态路由
const Home = () => import("../views/Home.vue");
const About = () => import("../views/About.vue");
const NotFound = () => import("../views/NotFound.vue");

// 这里要注意一点，如下面这种写的话会报错，ts
// {
//    path: "/",
//    name: "Home",
//    component: () => import("../views/Home.vue")
//  },


const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/About",
    name: "About",
    component: About,
  },
  {
    path: "/:pathMatch(.*)*", // 代替vue2的通配符path: "*",
    name: "NotFound",
    component: NotFound,
  },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

3、使用

3.1、先写跳转

3.2、接受参数

到这里基本就成功了，不清楚的在下方留言，看到就及时回复你们

相关文章

vite.config.ts 基础配置，持续更新

vue3+vite+ts 安装遇到的一些问题和解决方案

vue3 keep-alive+vuex配合使用（简单易用）