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

作者：管理员 2022-04-13 10:11:31 分类：Vue3新篇章阅读（1309） 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

动态路由

对路由的添加通常是通过 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) 打赏

标签：

Vue路由路由

上一篇：Node.js通过tree-cli插件快速生成项目结构README.md项目目录描述

下一篇：仅需一行 CSS即可实现 10 种主流布局