前言

随着前端技术的快速发展和前后端分离架构的普及，单页面应用（SPA）已成为现代Web开发的主流。在SPA中，前端路由和状态管理扮演着至关重要的角色。Vue3作为当前流行的前端框架之一，提供了强大的路由（Vue Router）和状态管理（Vuex、Pinia等）解决方案。本章节将深入探讨Vue3中的路由与状态管理，涵盖路由的基本概念、实现原理、搭建与配置、动态与编程式路由、命名路由与视图、路由守卫等关键内容，以及Vuex和Pinia等状态管理库的基本使用、异步处理、计算属性和辅助函数的应用，还包括Vuex-persist数据持久化、模块分割和多状态管理等高级话题。此外，还将探讨在组合式API中如何使用Router和Vuex，并通过一个综合案例来加深理解。

一、路由的基本搭建与嵌套路由模

1、vue路由的搭建

路由在vue中属于第三方插件，需要下载安装后进行使用。

npm i -D vue-router

安装好后，需要对路由进行配置，并且与Vue进行结合，让路由插件生效。在/src/router/index.js创建配置文件。

import Home  from "@/views/Home.vue";
import Test from "@/views/Test.vue";
import { createRouter,createWebHistory } from "vue-router";

const routes=[
    {
        path: '/',
        component:Home
    },
    {
        path: '/test',
        component: Test
    }
]

// 创建路由实例
const router=createRouter({
    history:createWebHistory(),
    routes
})

export default router

在src/main.js使用router。

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";

createApp(App).use(router).mount('#app')

在src/views下创建Home页面，定义路由组件。

<template>
    <div class="wrapper">hello world</div>
</template>

<script>
export default {
    name: 'HomeView',
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

在src/views下创建Test页面，定义路由组件。

<template>
    <div class="wrapper">world hello</div>
</template>

<script>
export default {
    name: 'TestView',
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: aqua;
}
</style>

/src/App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

本地开发环境运行项目,通过url切换查看路由页面

npm run serve

切换url

2、路由跳转

修改App.vue

<template>
  <div>
    <router-link to="/">首页</router-link> |
    <router-link to="/test">测试</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

3、嵌套路由模式(二级路由)

在src/views下创建TestChild页面，定义路由组件。

<template>
    <div class="wrapper">这里是test的嵌套路由</div>
</template>
<script>
export default {
    name: 'TestChild',
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: pink;
}
</style>

在src/router下配置test嵌套路由。

import Home  from "@/views/Home.vue";
import Test from "@/views/Test.vue";
import TestChild from "@/views/TestChild.vue";
import { createRouter,createWebHistory } from "vue-router";
const routes=[
    {
        path: '/',
        component:Home
    },
    {
        path: '/test',
        component: Test,
        children:[
            {
                path:'testchild',
                component: TestChild
            }
        ]
    }
]
const router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

在test.vue中使用嵌套路由

<template>
    <div class="wrapper">world hello</div> 
    <router-link to="/test/testchild">嵌套路由</router-link>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'TestView',
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: aqua;
}
</style>

二、动态路由模式与编程式路由模式

1、动态路由模式

所谓的动态路由其实就是不同的URL可以对应同一个页面，这种动态路由一般URL还是有规律可循的，所以非常适合做类似于详情页的功能。
通常采用path: 'xxx/:id'的方式来实现动态路由。

• 动态路由TestChilddemo

在/src/router配置TestChild动态路由

import Home  from "@/views/Home.vue";
import Test from "@/views/Test.vue";
import TestChild from "@/views/TestChild.vue";
import { createRouter,createWebHistory } from "vue-router";
const routes=[
    {
        path: '/',
        component:Home
    },
    {
        path: '/test',
        component: Test,
        children:[
            {
                path:'testchild/:id',
                component: TestChild
            }
        ]
    }
]
const router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

修改Test.vue

<template>
    <div class="wrapper">world hello</div> 
    <router-link to="/test/testchild/1">嵌套路由</router-link>|
    <router-link to="/test/testchild/2">嵌套路由</router-link>
    <div>
        <router-view></router-view>
    </div>
</template>

• 获取动态id值

在TestChild.vue的template中获取动态路由id

{{$route.params.id}}

2、编程式路由（插槽方式）

前面介绍过如何在页面中对路由进行切换，可以采用声明式写法<router-link>来完成，但是往往这种方式不够灵活，首先不能更灵活的控制结构和样式，其次不能自动进行路由的跳转，必须点击操作才行。那么编程式路由就会在JavaScript中通过逻辑的方式进行路由跳转。

1)、作用域插槽

2)、 @click.prevent、this.$router.push(href)、this.$router.replace(),

@click监听 DOM 元素的点击事件,.prevent修饰符会调用事件对象的 preventDefault() 方法
preventDefault() 方法阻止元素的默认事件行为,从而确保确保不会有其他潜在的默认行为被意外触发

this.$router.push()会向浏览器的历史记录中添加一个新的记录，因此当用户点击后退按钮时，
他们会返回到使用 push() 方法跳转之前的页面。

this.$router.replace()用于跳转到指定的 URL，但它不会向浏览器的历史记录（history stack）中添加新的记录。

3)、demo案例,

修改App.vue，使用href, isExactActive ,isActive，href，通过this.$router.push(href)实现路由跳转

<template>
  <div>
    <router-link to="/">首页</router-link> |
    <router-link to="/test" v-slot="{ href, isActive }">
      <button :class="{ active: isActive }" @click.prevent="navigateTo(href)">
        测试
      </button>
    </router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    navigateTo(href) {
      this.$router.push(href);
    }
  }
}
</script>
<style scoped>
.active {
  color: #666;
  background: orange;
  border: none;
  /* 活跃的样式 */
  font-weight: bold;
}
</style>

修改Test.vue,使用navigate与this.$router.push(href)

<template>
  <div class="wrapper">
    <router-link to="/test/testchild/1" v-slot="{ href, isExactActive }">
      <button :class="{ 'exact-active1': isExactActive }" @click.prevent="navigateTo(href)">
        嵌套路由1
      </button>
    </router-link>
    <router-link to="/test/testchild/2" custom v-slot="{navigate, isExactActive }">
      <button  @click="navigate" :class="{ 'exact-active2': isExactActive }">
          嵌套路由2
      </button>
    </router-link>
  </div>
  <router-view></router-view>
</template>
<script>
export default {
  name: 'TestView',
  methods: {
    navigateTo(href) {
      this.$router.push(href);
    }
  }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: green;
}
.exact-active1 {
  color: orange;
}
.exact-active2 {
  color: purple;
}
</style>

三、命名路由与命名视图与路由元信息

1、普通命名路由

在路由跳转中，除了path 之外，你还可以为任何路由提供 name 的形式进行路由跳转。

• 没有硬编码的 URL
• params 的自动编码/解码
• 防止你在 url 中出现打字错误
• 绕过路径排序（如显示一个）

修改src/router,使用name:'test'

import Home  from "@/views/Home.vue";
import Test from "@/views/Test.vue";
import { createRouter,createWebHistory } from "vue-router";
const routes=[
    {
        path: '/',
        component:Home
    },
    {
        path: '/test',
        component: Test,
        name:'test'
    }
]
const router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

修改App.vue,:to="{name:'test'}"

<template>
  <div>
    <router-link to="/">首页</router-link> |
    <router-link :to="{name:'test'}">测试
    </router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scoped>
</style>

2、命名路由（携带动态路由id）

修改src/router里的test路由path

{
        path: '/test/:id',
        component: Test,
        name:'test'
}

修改App.vue,通过params指定路由idparams:{id:123}

<template>
  <div>
    <router-link to="/">首页</router-link> |
    <router-link :to="{name:'test',params:{id:123} }">测试
    </router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scoped>
</style>

3、同级展示多个视图

修改src/router,使用components将Home和Test放在一起

import Home  from "@/views/Home.vue";
import Test from "@/views/Test.vue";
import { createRouter,createWebHistory } from "vue-router";
const routes=[
    {
        path: '/',
        components: {
            default: Home,
            test: Test,
        },
    }
]
const router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

修改App.vue,使用router-view渲染视图

<template>
  <div>
    <router-view></router-view>
    <router-view name="test"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scoped>
</style>

修改Test.vue

<template>
  <div class="wrapper">Test</div>
</template>
<script>
export default {
  name: 'TestView',
}
</script>
<style scoped>
.wrapper {
  width: 100px;
  height: 100px;
  background: pink;
}
</style>

4、meta属性接受附加信息

修改src/router,给test路由加上meta属性

import Home  from "@/views/Home.vue";
import Test from "@/views/Test.vue";
import { createRouter,createWebHistory } from "vue-router";
const routes=[
    {
        path: '/',
        component:Home,
        name: 'home',
    },
    {
        path: '/test',
        component: Test,
        name:'test',
        meta:{auth:true}
    }
]
const router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

在test.vue中获取打印meta

mounted(){
    console.log(this.$route.meta.auth,'auth')
}

四、 路由传递参数的多种方式

• query方式（显示） -> $route.query
• params方式（显、隐式） -> $route.params

但是vue-router 从4.1.4版本开始 不再支持params 隐式传参，该传参方式之前一直是不推荐的，因为一旦刷新页面参数就获取不到了。
query:直接在 URL 中作为查询字符串（?id=value）显示
params 是通过路径中的动态段来传递的，而不是查询字符串

• query、params传参

修改src/router

import Home  from "@/views/Home.vue";
import Test from "@/views/Test.vue";
import TestChild1 from "@/views/TestChild1.vue";
import TestChild2 from "@/views/TestChild2.vue";
import { createRouter,createWebHistory } from "vue-router";
const routes=[
    {
        path: '/',
        component:Home,
        name: 'home',
    },
    {
        path: '/test',
        component: Test,
        name:'test',
        children: [
            {
                path: 'testchild1',
                component: TestChild1,
                name: 'test1'
            },
            {
                path: 'testchild2/:id',
                component: TestChild2,
                name: 'test2'
            }
        ]
    }
]
const router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

修改Test.vue

<template>
  <div class="wrapper">
    <router-link :to="{name:'test1', query: { id: 111 } }">Test1</router-link> |
    <router-link :to="{name:'test2', params: { id: 222 } }">Test2</router-link> 
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'TestView'
}
</script>
<style scoped>
.wrapper {
  width: 100px;
  height: 100px;
  background: pink;
}
</style>

新建src/views/TestChild1.vue

<template>
    <div class="wrapper">TestChild1</div>
</template>
<script>
export default {
    name: 'TestChild1',
    mounted(){
        console.log(this.$route.query,'query')
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: green;
}
</style>

新建src/views/TestChild2.vue

<template>
    <div class="wrapper">TestChild2</div>
</template>
<script>
export default {
    name: 'TestChild2',
    mounted() {
        console.log(this.$route.params, 'params')
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: blue;
}
</style>

五、route对象与router对象

1、route对象是获取路由信息 -> $route.params

2、router对象是调用路由方法 -> $router.push()

3、路由守卫详解及应用场景

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，守卫主要的作用就是在进入到指定路由前做一个拦截，看一下我们是否具备权限，如果有权限就直接进入，如果没权限就跳转到其他页面。

路由守卫分类一般可以分为三种路由守卫使用的方式：

• 全局环境的守卫
• 路由独享的守卫
• 组件内的守卫

全局环境的守卫,其中to表示需要进入到哪个路由，from表示从哪个路由离开的，那么next表示跳转到指定的页面。

router.beforeEach((to, from, next)=>{
  if(to.meta.auth){
    next('/');
  }
  else{
    next();
  }
})

路由独享的守卫,只给某一个指定的路由添加守卫

const routes = [
    {
        name: 'bar',
        component: Bar,
        beforeEnter(to, from, next){
            if(to.meta.auth){
                next('/');
            }
            else{
                next();
            }
        }
    }
];

组件内的守卫,可以通过在.vue文件中进行路由守卫的设置，代码如下：

<script>
  export default {
    name: 'FooView',
    beforeRouteEnter(to, from, next){
      if(to.meta.auth){
        next('/');
      }
      else{
        next();
      }
    }
  }
</script>

六、Vuex共享状态

1、Vuex五大核心模块

• 安装vuex

npm i -D vuex

2、使用state模块，状态管理

用来存放应用的状态（数据，类似于Vue组件中的data属性，是响应式的，当状态改变时，视图会自动更新

常见的state属性状态管理对象

• 新建src/store/index.js

import { createStore } from "vuex";
const store=createStore({
    state:{
        count:0
    }
});
export default store

• 在src/main.js中引入store

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

• 在.vue文件中使用store,如Home.vue

<template>
    <div>{{ $store.state.count }}</div>
</template>
<script>
export default {
    name: 'HomeView'
}
</script>
<style scoped>
</style>

3、使用getters模块，计算属性

可以获取state中的状态并进行计算后返回，类似于Vue组件中的computed属性， 可以用于对状态进行复杂处理，返回处理后的结果

• 修改src/store/index.js

import { createStore } from "vuex";
const store=createStore({
    state: {
        users: [
            { id: 1, name: 'A', isActive: true },
            { id: 2, name: 'B', isActive: false },
            { id: 3, name: 'C', isActive: true },
        ]
    },
    getters: {
        activeUsersCount: state => {
            return state.users.filter(user => user.isActive).length;
        }
    }
});
export default store

• 修改Home.vue

<template>
    <div class="wrapper">
         <p>活跃用户数量: {{ activeUsersCount }}</p>
         <!-- <p>活跃用户数量: {{ $store.getters.activeUsersCount }}</p> -->
    </div>
</template>
<script>
export default {
    name: 'HomeView',
    computed: {
        activeUsersCount() {
            return this.$store.getters.activeUsersCount;
        }
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

• 修改Test.vue,注释count使用

//{{ $store.state.countModule.count }}

4、使用mutations模块，同步状态更新

唯一可以修改state的方法，必须是同步函数，用于处理同步事务， 提交时，可以使用commit方法

• 修改src/store/index.js

import { createStore } from "vuex";
const store=createStore({
    state:{
        count:0
    },
    mutations: {
        plus(state){
            state.count++
        }
    }
});
export default store

• 修改Home.vue

<template>
    <div class="wrapper">
         {{ $store.state.count }}
        <button @click="handleClick">点击</button>
    </div>
</template>
<script>
export default {
    name: 'HomeView',
    methods:{
        handleClick(){
            // this.$store.state.count++
            this.$store.commit('plus')
        }
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

• 修改Test.vue

<template>
  <div class="wrapper">
    {{ $store.state.count }}
  </div>
</template>
<script>
export default {
  name: 'TestView'
}
</script>
<style scoped>
.wrapper {
  width: 100px;
  height: 100px;
  background: pink;
}
</style>

5、使用actions模块，异步操作

异步操作|可以包含任意异步操作，通过提交mutations来改变state，可以包含任意异步操作，如API请求， 提交时，可以使用dispatch方法

• 修改src/store/index.js

import { createStore } from "vuex";
const store=createStore({
    state:{
        count:0
    },
    mutations: {
        plus(state, payload){
            state.count++
            console.log(payload,'mutations-payload')
        }
    },
    actions: {
        update(context,payload){
            setTimeout(()=>{
                console.log(payload,'actions-payload')
                context.commit('plus', payload)
            })
        }
    }
});
export default store

• 修改Home.vue

<template>
    <div class="wrapper">
         {{ $store.state.count }}
        <button @click="handleClick">点击</button>
    </div>
</template>
<script>
export default {
    name: 'HomeView',
    methods:{
        handleClick(){
            const num=999
            this.$store.dispatch('update',num)
        }
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

6、使用modules模块，模块化开发

将单一状态树分割成多个模块，每个模块拥有自己的state、mutations、actions、getters， 使得代码更加清晰，便于维护， 可以使用modules属性将多个模块合并成一个单一的Vuex store

• 新建src/store/modules/index.js

const state = {
    count: 0
}
const getters={}
const actions={}
const mutations={
    plus(state) {
        state.count++
    }
}
export default {
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}

• 修改src/store/index.js,使用modules:{countModule }加载单个countModule模块

import { createStore } from "vuex"
import countModule from "./modules/index"
const store = new createStore({
    state: {},
    getters :{},
    mutations: {},
    actions: { },
    modules:{
        countModule
    }
})
export default store

• 修改Home.vue，还是通过this.$store.commit('plus')或者this.$store.commit('countMoudlues/plus')调用mutations模块里的plus方法

<template>
    <div class="wrapper">
        {{ $store.state.countModule.count }}
        <button @click="handleClick">点击</button>
    </div>
</template>
<script>
export default {
    name: 'HomeView',
    methods: {
        handleClick() {
            this.$store.commit('countMoudlues/plus')
        }
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

• 修改Test.vue,通过{{ $store.state.countModule.count }}获取count

<template>
  <div class="wrapper">
    {{ $store.state.countModule.count }}
  </div>
</template>
<script>
export default {
  name: 'TestView'
}
</script>
<style scoped>
.wrapper {
  width: 100px;
  height: 100px;
  background: pink;
}
</style>

7、vuex的辅助函数

Vuex 提供了一些辅助函数（helper functions）来帮助我们更方便地在 Vue 组件中使用 Vuex 的状态（state）、getters、mutations 和 actions。这些辅助函数通常在结合 Vue 的 mapState、mapGetters、mapMutations 和 mapActions 一起使用时非常有用。

• 修改home.vue，@click="plus()"中plus可以传递参数

<template>
    <div class="wrapper">
        {{ count }}
        <button @click="plus()">点击</button>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'HomeView',
    methods: {
        ...mapMutations('countModule', ['plus'])
    }, computed: {
        // 使用对象展开运算符将 `mapState` 的结果混入 computed 对象中
        // ...mapState(['count'])
        //如果是使用的countModule模块,则使用
        ...mapState('countModule', ['count'])
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

8、Vuex-presist对数据进行持久化处理

Vuex-presist文档

将Vuex的状态持久化到本地存储（如localStorage或sessionStorage），以便在页面刷新或重新加载时能够恢复状态。这对于需要长期存储的数据（如用户信息、令牌等）特别有用。

• 安装插件,使用上一节的mutations的模块案例扩展使用Vuex-presist

npm i -D vuex-persist

• 修改src/store/index.js

import { createStore } from "vuex"
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
    //默认存储window下的localStorage
    storage: window.localStorage,
    // 单一存储对象,一般会存储，state中的user和token属性
    // reducer: (state)=>({count:state.count})
})
const store = new createStore({
    state: {
        count: 0
    },
    mutations: {
        plus(state) {
            state.count++
        }
    },
    actions: { },
    plugins: [vuexLocal.plugin]
})
export default store

• 修改Home.vue

<template>
    <div class="wrapper">
        {{ $store.state.count }}
        <button @click="handleClick">点击</button>
    </div>
</template>
<script>
export default {
    name: 'HomeView',
    methods: {
        handleClick() {
            // this.$store.state.count++
            this.$store.commit('plus')
        }
    }
}
</script>
<style scoped>
.wrapper {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

七、使用组合式api获取router。router，vuex对象

在 Vue 3 中，随着 Composition API 的引入，我们使用新的逻辑组合和重用来编写我们的 Vue 组件。

import { useRoute，useRouter,useStore } from 'vue-router';
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    console.log(route,'route)
    console.log(router,'router)
    console.log(store,'store)
  }
};