vite中引入vue-router路由vite2+vue3+TS+vue-router

vite中引入vue-router路由vite2+vue3+TS+vue-router

webpack打包过程是先打包然后再放到浏览器运行,这个打包过程随着项目代码的叠加,开发过程中等待打包的时间也会边长。而vite2是先将项目放到浏览器环境下,使浏览器接管了打包程序的部分工作,只需要在浏览器请求源码时进行转换并按需提供源码,这大大增加了开发效率。同时vite2与vue3和typescript更加适合。

vite项目创建

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
创建完项目后要进入项目文件夹
npm install
安装所需的npm包

路由管理

在vite2的模板默认安装下是没有路由的需要自行安装
npm install vue-router@4 // 指定版本4

新建router文件夹创建index.ts

// 引入创建路由管理器 引入创建路由模式 history模式
import { createRouter, createWebHistory } from 'vue-router'
import Home from "@/view/home.vue" // 使用别名@
// 引入路由各页面配置
const routes=[
  {
    path: '/',
    redirect: '/index'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/index',
    component: ()=>import('../pages/index.vue')
  }
]
// 创建路由管理器 模式和路由
const router=createRouter({
  history: createWebHistory(),
  routes
})

export default router

@别名配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

Ts支持

如果项目中使用了 TypeScript 语言,按照上面的步骤配置好 Vite 后,就可以通过别名来导入文件,但是此时会提示一个错误信息

Cannot find module '@/xxx' or its corresponding type declarations.Vetur(2307)

找不到模块“@/xxx”或其相应的类型声明。虽然这个报错不会影响程序的运行,但是会导致 TypeScript 的类型提示功能异常,无法进行代码语法提示。要解决这个错误,需在根目录下的 tsconfig.json 中配置 paths 内容:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  }
}

 

main.ts引入路由管理器

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

和vue2不同点

路由Vue3和Vue2区别不大,唯一注意的是setup里没有this,获取路由对象需要引入useRoute、useRouter

<script setup>
let router = new useRouter;
let route = new useRoute;
console.log( route.query.act )
let go = ()=>{
   router.push('/about')
}
</script>

动态路由

对路由的添加通常是通过 routes 选项来完成的,但是在某些情况下,你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序,官方文档

判断路由是否存在

router.beforeEach(to => {
  if (!router.hasRoute(to.name)) {
    console.log('找不到该路由',to)
  }else{
    console.log('找到了',to.name)
  }
})

查看所有路由

router.options.routes // 只能获取到静态路由
router.getRoutes() // 获取到所有路由信息(包括动态路由)

动态路由添加

vue-router4中没有addRoutes,只有addRoute,所以动态路由需要一个个添加。

businessRouter // 来自后端返回的动态路由信息数组
businessRouter.forEach((item) => {
  router.addRoute(item);
});

添加嵌套路由

要将嵌套路由添加到现有的路由中,可以将路由的 name 作为第一个参数传递给 router.addRoute(),这将有效地添加路由,就像通过 children 添加的一样:

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

// 这等效于:

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

 

    温馨提示:本文最后更新于2022-11-25 06:54:36,某些文章具有时效性,若有错误或已失效,请在下方留言

    —- 本页内容已结束,请看下一页内容—-

    感谢您的来访,获取更多精彩文章请收藏本站。

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞7赞赏 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容