持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情
3. vue-router
和vue2差不多，会有一些差别在组合式api，还有创建的过程
在src/router/index.js中完成代码
import { createRouter, createWebHashHistory } from 'vue-router'
// VueRouter.createRouter
const routes = []
// 创建路由对象
const router = createRouter({
// history模式
history: createWebHashHistory(),
routes
})
export default router
在main.js将router放在createApp中
import router from './router'
createApp(App)
.use(router)
.mount('#app')
在App.vue中添加router-view
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>
<template>
<router-view></router-view>
</template>
<style>
</style>
最终路由生效
3.1 历史模式
现在history模式必须得配置
- createWebHashHistory
- createWebHistory
这两个函数都需要从vue-router中引入，在特定的位置进行调用
const router = createRouter({
// history模式
history: createWebHashHistory(),
routes
})
3.2 route和router的获取
在vue2中，我们可以通过this.router获取到当前的路由信息对象和路由对象。但是因为在组合式api中没有this，所以需要使用useRoute和useRouter函数，都是从vue-router中引入的
import { useRoute, useRouter } from 'vue-router'
const route = useRoute() // 就是 this.$route
const router = useRouter() // 就是 this.$router
3.2.1 query参数和params参数获取
通过useRoute获取到route对象，然后再获取相关的参数
import { useRoute } from 'vue-router'
const route = useRoute() // 就是 this.$route
route.query.xxx // 获取url后面?的参数
route.params.xxx // 获取动态路由中的参数
3.2.2 编程式导航
在vue2的开发中，我们可以通过this.$router.push跳转路由
在组合式api中，我们需要先通过useRouter获取到router对象，再调用push方法
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('path')
4. vuex
4.1 安装vuex
在Vue3中使用vuex在创建对象时有变化
import { createStore } from 'vuex'
const store = createStore({
state () {
return {}
},
/* state: () => ({
})*/
mutations: {
},
actions: {
},
getters: {
},
modules: {
}
})
export default store
在 main.js 中引入对应的store
import store from './store'
createApp(App)
.use(store)
.use(router)
.mount('#app')
4.2 使用vuex中state
因为setup里没有this，所以我们不能再使用this.$store了，所以我们需要借助hook函数useStore
const store = useStore()
4.3 使用state和getter
使用组合式api使用state和getter，我们还是需要借助computed
// store/index.js
{
state: () => ({
msg: 'state中的数据'
}),
getters: {
getterDemo () {}
}
}
// 非组合式api写法
export default {
computed: {
msg () {
return this.$store.state.msg
},
getterDemo () {
return this.$store.getters.getterDemo
}
}
}
// 组合式api写法
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const msg = computed(() => store.state.msg)
const getterDemo = computed(() => store.getters.getterDemo)
4.3 使用mutation和action
// store/index.js
{
state: () => ({
msg: 'state中的数据'
}),
mutations: {
changeMsg (state, msg) {
state.msg = msg
}
},
actions: {
actionname ({commit}, msg) {
}
}
}
// 组合式api写法
import { useStore } from 'vuex'
const store = useStore()
const handle = () => store.commit('changeMsg', "数据")
const handle2 = () => store.dispatch('actionname', '数据')
Vite配置
1 路径别名配置
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})
虚拟DOM
在Vue3中创建虚拟DOM的函数需要从vue中引入
import { h } from 'vue'
语法
h("标签名", {key: "value"}, [h(), h(), "普通字符串"])
// 组件
h(组件对象, {key: "value", on事件类型: () => {}}, [h()])
缓存路由
在Vue2中缓存可以直接通过keep-alive组件，包裹router-view
<keep-alive>
<router-view></router-view>
</keep-alive>
在vue3中有不同的写法
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'fade'" mode="out-in">
<keep-alive>
<component
:is="Component"
:key="route.meta.usePathKey ? route.path : undefined"
/>
</keep-alive>
</transition>
</router-view>
<!-- 如果不需要动画 -->
<router-view v-slot="{ Component, route }">
<keep-alive>
<component
:is="Component"
:key="route.meta.usePathKey ? route.path : undefined"
/>
</keep-alive>
</router-view>
