vue3 中使用 vue-router 和 vuex

安装 vue-router 4.0 以上版本

• 组件中使用vue-router

<script lang="ts">
import { useRoute, useRouter, createRouter, createWebHistory } from 'vue-router'
import { defineComponent } from 'vue'
export default defineComponent({
    setup () {
        const route = useRoute() // 路由信息
        const router = useRouter() // 路由跳转
        
        const mode = createWebHistory() // 路由模式
        const createR = createRouter({
            history: mode,
            routes: [
                {...}
            ]
        }) // 用来创建路由，跟vue2使用的VueRouter一样
    }
})
</script>

• Vu3中404页面配置

{
  path: '/:catchAll(.*)',
  name: '404',
  component: () => import('@/views/NotFound.vue')
}

安装 Vuex ，中大型项目

• store 存储数据

• mutation 修改 store存储的数据

• action 用来执行一些异步操作，调用mutation的方法，调用异步请求

• 更加高深的用法自行百度，利用 module 来对 store 进行拆分

• view 通过 action方法 来修改 state(store) 的数据，而 state(store) 的数据又是响应式的，进而会修改页面内容

• vue3 中安装和使用，使用也是跟 vue-router 有对应的 api ，都是以 use 开头的方法

import { createStore } from 'vuex'
const store = createStore({
    state: {}
})