nvm配置
安装
下载地址：https://github.com/coreybutler/nvm-windows/releases
安装直接无脑下一步即可，也可自行修改安装路径。
安装完成执行：nvm -version查看安装是否成功。
安装node环境执行：nvm install 16.12.0对应的node版本号即可。
卸载也是同理nvm uninstall 16.12.0
查看当前系统所有node版本：nvm list
node版本切换：nvm use 16.14.2对应的版本号即可。
有一个小坑如下，以管理员运行即可解决。
vite构建
创建项目
npm init vite@latest xxx(项目名称) --template vue-ts
执行后选择vue即可。
router
router安装
npm install vue-router@next
router路由跳转
main.js
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
27
28
29
30
31
32
33
|
import home from '../views/home/index.vue';
import mine from '../views/mine/index.vue';
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/home',
name: 'home',
component: home,
meta: {
title: '',
keepAlive: false
}
},
{
path: '/mine',
name: 'mine',
component: mine,
meta: {
title: '',
keepAlive: false
}
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
|
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
| // 包引入
import { useRouter } from 'vue-router'
const router = useRouter()
// 第一种
<button @click="() => router.push({ path: '/home'})">首页</button>
<button @click="() => router.push({ path: '/mine'})">个人中心</button>
<router-view />
<!-- 另一种路由跳转方法 -->
<router-link to="/home">首页</router-link>
<router-link to="/mine">个人中心</router-link>
|
router传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
console.log(route.query)
</script>
<template>
个人中心
<button @click="() => router.push({ name: 'home', params: {id: 2}})">跳转到首页</button>
</template>
<style>
</style>
|
另一种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
console.log(route.params)
</script>
<template>
首页
<button @click="() => router.push({ path: '/mine', query: {id: 1}})">跳转到个人中心</button>
</template>
<style>
</style>
|
