vue-router vuex 基本配置

安装

• yarn add vue-router vuex -S
  

文件配置

• 创建 router 文件

  • import { createRouter, createWebHashHistory } from 'vue-router'
    import type { RouteRecordRaw } from 'vue-router'
    
    import localCache from '../utils/cache'
    
    const routes: RouteRecordRaw[] = [
      {
        path: '/',
        redirect: '/main',
      },
      {
        path: '/login',
        component: () => import('@/views/login/Login.vue'),
      },
      {
        path: '/main',
        component: () => import('@/views/content-main/content-main.vue'),
      },
    ]
    
    const router = createRouter({
      routes,
      history: createWebHashHistory(),
    })
    
    router.beforeEach((to) => {
      // 全局导航守卫
      if (to.path !== '/login') {
        const token = localCache.getCache('token')
        if (!token) {
          return '/login'
        }
      }
    })
    
    export default router
    

  • 根据路径创建对用的文件
• 创建 store 文件

  • 创建一个总仓库

  •   import { createStore } from 'vuex'
    
      import login from './login/login'
    
      import { IRootState } from './types'
      // 总仓库
      const store = createStore<IRootState>({
        state() {
          return {
            name: '',
            age: 18,
          }
        },
        mutations: {},
        getters: {},
        actions: {},
        modules: {
          // 注册登录模块 仓库
          login,
        },
      })
    
      export function setupStore() {
        store.dispatch('login/loadLocalLogin')
      }
    
      export default store
    
    

  • 

• main.ts 中引入 注册

  •    import { createApp } from 'vue'
       import App from './App.vue'
    
       import ElementPlus from 'element-plus'
    
       import router from './router'
       import store from './store'
    
       import hyRequest from './service'
    
       const app = createApp(App)
       app.use(ElementPlus)
       app.use(router)
       app.use(store)
       app.mount('#app')