唯品秀前端博客
当前位置: 前端开发 > Vue3新篇章 >

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

作者：管理员 2022-04-13 10:11:31 分类：Vue3新篇章 阅读（1669） 0

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

vite项目创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 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
1
2
3
创建完项目后要进入项目文件夹
npm install
安装所需的npm包

路由管理

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

新建router文件夹创建index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 引入创建路由管理器 引入创建路由模式 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

@别名配置

1
2
3
4
5
6
7
8
9
10
11
12
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 后，就可以通过别名来导入文件，但是此时会提示一个错误信息

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

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

1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  }
}

main.ts引入路由管理器

1
2
3
4
5
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

1
2
3
4
5
6
7
8
<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 )这样的应用程序可以使用它来扩展应用程序，官方文档

判断路由是否存在

1
2
3
4
5
6
7
router.beforeEach(to => {
  if (!router.hasRoute(to.name)) {
    console.log('找不到该路由',to)
  }else{
    console.log('找到了',to.name)
  }
})

查看所有路由

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

动态路由添加

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

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

添加嵌套路由

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

1
2
3
4
5
6
7
8
9
10
11
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 }],
})
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(0) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"vite中引入vue-router路由vite2+vue3+TS+vue-router"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏