Vue3+vite+TS

最新推荐文章于 2024-07-14 11:27:20 发布

程序猿_“大神”

最新推荐文章于 2024-07-14 11:27:20 发布

阅读量735

点赞数 4

文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/dyx001007/article/details/127724959

版权

一、搭建项目，下载依赖

下载vite ：npm init vite@latest 项目名，

下载依赖包：npm install

二、配置路由

在src下创建router文件夹，在文件夹里创建index.js

下载路由依赖：npm install vue-router

在文件里配置路由

createRouter 创建路由模块
createWebHistory 创建路由模式
RouteRecordRaw 增加路由对象类型限制，好处：允许在基础路由里面增加开发者自定义属性

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')