当前位置:   article > 正文

Vue3+vite+TS

vue3+vite+ts

 一、搭建项目,下载依赖

下载vite :npm init vite@latest  项目名,

下载依赖包:npm install

e3863c052a31495682407deb89ba56b1.png

 二、配置路由

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

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

在文件里配置路由

  • createRouter  创建路由模块
  • createWebHistory  创建 路由模式
  • RouteRecordRaw  增加路由对象类型限制,好处:允许在基础路由里面增加开发者自定义属性
import {createRouter ,createWebHistory ,RouteRecordRaw} from "vue-router"

 查找不到路由跳转的页面

 自定义路由类型 catchAll     (.*)匹配规则

  1. {
  2. path:'/:catchAll(.*)',//自定义路由类型 catchAll (.*)匹配规则
  3. name:'404',
  4. component:()=>import("../views/404.vue")
  5. },

  1. // createRouter 创建路由模块
  2. // createWebHistory 创建 路由模式
  3. // RouteRecordRaw 增加路由对象类型限制,好处:允许在基础路由里面增加开发者自定义属性
  4. import {createRouter ,createWebHistory ,RouteRecordRaw} from "vue-router"
  5. const routes:Array<RouteRecordRaw> = [
  6. {
  7. path:'/',
  8. name:'Home',
  9. component:()=>import("../views/Home.vue")
  10. },
  11. {
  12. path:'/register',
  13. name:'Register',
  14. component:()=>import("../views/Register.vue")
  15. },
  16. {
  17. path:'/:catchAll(.*)',//自定义路由类型 catchAll (.*)匹配规则
  18. name:'404',
  19. component:()=>import("../views/404.vue")
  20. },
  21. ]
  22. // 创建路由器
  23. const router = createRouter({
  24. history:createWebHistory(),//创建路由模式为history
  25. routes:routes //引入路由表
  26. })
  27. export default router

配置完之后在main.ts里面进行配置

在App.vue中写  <router-view></router-view>

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. const app = createApp(App)
  5. app.use(router)
  6. app.mount('#app')

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/379274
推荐阅读