携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情 >>

vue-router4

vue升级vue3之后，配套的vue-router也升级为vue-router@4.x版本

vue-router4的语法和3的版本语法基本一致，但是有一些细微的修改。

vue-router官网：router.vuejs.org/

vue@2 + vue-router@3 + vuex@3   options api
​
vue@3 + vue-router@4 + vuex@4    composition api

基本使用

(0)安装vue-router

yarn add vue-router

(1)创建组件Home.vue和Login.vue

(2)创建文件router/index.js

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from 'vue-router'
​
// 1. 创建路由
const router = createRouter({
  // 创建history模式的路由
  // history: createWebHistory(),
  // 创建hash模式的路由
  history: createWebHashHistory(),
  // 配置路由规则
  routes: [
    { path: '/home', component: () => import('../pages/Home.vue') },
    { path: '/login', component: () => import('../pages/Login.vue') },
  ],
})
​
export default router
​

（3）在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
​
createApp(App).use(router).mount('#app')
​

(4)App.vue中使用

<template>
  <ul>
    <li>
      <router-link to="/home">首页</router-link>
    </li>
    <li>
      <router-link to="/login">登陆</router-link>
    </li>
  </ul>
​
  <!-- 路由出口 -->
  <router-view></router-view>
</template>
​
​

组件中使用route与router

由于组件中无法访问this,因为无法访问this.$route与this.$router

（1）通过useRoute()可以获取route信息

<script>
import { useRoute } from 'vue-router'
​
export default {
  setup() {
    const route = useRoute()
    console.log(route.path)
    console.log(route.fullPath)
  },
}
</script>

（2）通过useRouter()可以获取router信息

<script>
import { useRouter } from 'vue-router'
​
export default {
  setup() {
    const router = useRouter()
    const login = () => {
      router.push('/home')
    }
    return {
      login,
    }
  },
}
</script>

vuex4

基本使用

0. 安装依赖包

yarn add vuex

2. 创建文件 store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    money: 100,
  },
  mutations: {
    changeMoney(state) {
      state.money += 10
    },
  },
  actions: {
    changeMoneyAsync(context) {
      setTimeout(() => {
        context.commit('changeMoney')
      }, 1000)
    },
  },
  getters: {
    double(state) {
      return state.money * 2
    },
  },
})

export default store

3. 在main.js中关联store

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)

app.use(router)
app.use(store)
app.mount('#app')

在组件中使用vuex

const store = useStore()

const money = computed(() => store.state.money)
const double = computed(() => store.getters.double)


// mapState  mapMutations mapActions mapGetters  需要配合options api才能使用

总结：vuex4 在vue3项目中能用，但是不好用