通过Vue路由实现Tab栏切换案例，要求为：创建3个子路由，分别是“待付款”、“待发货”、“待收货”，在每个子路由页面单独写出相应的内容，页面效果如下

原题目Vue路由课后习题_使用vue路由实现tab栏切换案例待付款-CSDN博客，我是使用了的另一种方法。

1. Vue-router 是什么？它有哪些组件？

Vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 深度集成，使构建单页面应用变得易如反掌。Vue-router 的主要作用是构建单页应用（SPA）的路由系统，可以方便的将组件映射到路由上，使得我们可以控制组件的渲染和展示。

Vue-router 的主要组件包括：

• <router-link>：用于导航链接，它会被渲染为一个 <a> 标签，点击时导航到对应的路由。
• <router-view>：路由出口，路由匹配到的组件将渲染在这里。
• router：VueRouter 的实例，通常我们在 Vue 组件中通过 this.$router 访问它，用于编程式导航。
• route：当前路由对象，是一个包含了当前 URL 解析得到的信息的对象，可以通过 this.$route 在组件内部访问。

1. 什么是嵌套路由？

嵌套路由就是路由中的路由，即路由可以嵌套使用。在 Vue-router 中，我们可以通过在路由配置中使用 children 属性来定义嵌套路由。嵌套路由常用于构建复杂的 UI 界面，比如一个用户信息页面可能包含用户的基本信息、联系方式等多个子页面。

1. 路由如何传递参数？

在 Vue-router 中，传递参数主要有两种方式：

• 通过 URL 的 query 参数传递：通过在 URL 后面添加查询字符串来传递参数，例如 /user?id=123。在 Vue 组件中，可以通过 this.$route.query 来获取这些参数。
• 通过 URL 的 path 参数传递：在路由配置中，可以通过定义带参数的路由路径来接收参数，例如 /user/:id。在 Vue 组件中，可以通过 this.$route.params 来获取这些参数。

1.首先使用vuex创建状态管理库store.js

// store.js
// 用Vuex或其他状态管理库来管理全局状态。
import { createStore } from 'vuex'

export default createStore({
    state: {
        orderStatus: {
            id: 0,
            name: '待付款'
        }
    },
    mutations: {
        updateOrderStatus(state, payload) {
            // 将传入的payload对象的id属性赋值给state对象中的orderStatus的id属性
            state.orderStatus.id = payload.id
            // 将传入的payload对象的name属性赋值给state对象中的orderStatus的name属性
            state.orderStatus.name = payload.name
        }
    },
    actions: {
        setOrderStatus({ commit }, payload) {
            // 调用commit方法，更新订单状态
            commit('updateOrderStatus', payload)
        }
    },
    getters: {
        orderStatus: state => state.orderStatus
    }
})

2.在main.js中创建vue应用并使用store

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import GlobalComponentA from './components/GlobalComponentA.vue'
// 在的主入口文件（如main.js或main.ts）中，你需要创建Vue应用并使用这个store：
import store from './views/order/store.js'

const app = createApp(App)

app.use(store)
app.use(router)
// 注册全局组件, 组件名: 组件对象
app.component('GlobalComponentA', GlobalComponentA)

app.mount('#app')

3.在页面中使用store

<script setup>

import { computed, nextTick } from 'vue'
import { useStore } from 'vuex'
import { onMounted } from 'vue';
const store = useStore()
onMounted(() => {
    console.log(store.getters.orderStatus);
})

// 使用computed来获取订单状态，以确保它是响应式的
const orderStatus = computed(() => store.getters.orderStatus)

const changeStatus = async () => {
    if (orderStatus.value.id === 0) {
        store.dispatch('setOrderStatus', { id: 1, name: '已付款' }),
            await nextTick();

    }
    console.log(store.getters.orderStatus);
}

</script>

<template>
    <div>
        <h1>商品状态为：{{ orderStatus.name }}</h1>
        <input type="button" value="付款" @click="changeStatus">
    </div>
</template>

<style scoped>
/* 你的样式 */
</style>

4.同理其他路由页面只需修改id值就能实现状态的改变。