VueRouter路由与Vuex状态管理

原创

于 2024-06-09 13:14:28 发布 · 1.2k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端框架 #前端

前言

随着前端技术的快速发展和前后端分离架构的普及，单页面应用（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)、作用域插槽

属性	作用
href	这是 `<router-link>` 组件解析后的目标 URL,可以用它来在 JavaScript 中进行编程式导航
route	包含了当前路由信息的对象,可以通过它访问路由的路径、参数、查询等。
isActive	表示`<router-link>`是否指向当前活跃的路由，to 属性所指定的路由与当前路由匹配（包括子路由）
isExactActive	表示`<router-link>`是否精确匹配当前活跃的路由(路径)，与to属性所指路由完全一致（不包括子路由）
navigate	通常与路由跳转相关，`this.$router.push()` 或