赞
踩
下载vite :npm init vite@latest 项目名,
下载依赖包:npm install
下载路由依赖:npm install vue-router
import {createRouter ,createWebHistory ,RouteRecordRaw} from "vue-router"
自定义路由类型 catchAll (.*)匹配规则
- {
- path:'/:catchAll(.*)',//自定义路由类型 catchAll (.*)匹配规则
- name:'404',
- component:()=>import("../views/404.vue")
- },
- // createRouter 创建路由模块
- // createWebHistory 创建 路由模式
- // RouteRecordRaw 增加路由对象类型限制,好处:允许在基础路由里面增加开发者自定义属性
- import {createRouter ,createWebHistory ,RouteRecordRaw} from "vue-router"
- const routes:Array<RouteRecordRaw> = [
- {
- path:'/',
- name:'Home',
- component:()=>import("../views/Home.vue")
- },
- {
- path:'/register',
- name:'Register',
- component:()=>import("../views/Register.vue")
- },
- {
- path:'/:catchAll(.*)',//自定义路由类型 catchAll (.*)匹配规则
- name:'404',
- component:()=>import("../views/404.vue")
- },
- ]
-
- // 创建路由器
- const router = createRouter({
- history:createWebHistory(),//创建路由模式为history
- routes:routes //引入路由表
- })
-
- export default router

配置完之后在main.ts里面进行配置
在App.vue中写 <router-view></router-view>
- import { createApp } from 'vue'
- import App from './App.vue'
- import router from './router'
-
- const app = createApp(App)
- app.use(router)
- app.mount('#app')