当前位置：首页 > article >正文

Vue.js前端框架教程2：Vue路由和状态管理库Pinia

article 2024/12/22 14:13:37

文章目录

- - - Vue 路由
    - - 安装 Vue Router
      - 基本设置
      - 定义路由
      - 嵌套路由
      - 路由参数和查询
      - 导航守卫
      - 懒加载
      - 使用 `<router-link>` 和 `<router-view>`
    - Pinia
    - - Pinia 的核心特性
      - Pinia 的安装和使用

Vue 路由

Vue 路由是指在 Vue.js 应用中管理不同页面或视图的路由。Vue 官方提供了一个名为 Vue Router 的插件，它允许你为单页面应用（SPA）构建多视图的页面结构。以下是 Vue 路由的一些基本概念和使用方法：

安装 Vue Router

首先，你需要安装 Vue Router。如果你使用的是 Vue CLI 创建的项目，Vue Router 可能已经包含在内。否则，你可以通过 npm 或 yarn 来安装它：

npm install vue-router
# 或者
yarn add vue-router

基本设置

在你的 Vue 应用中，你需要创建一个路由器实例，并将其传递给 Vue 的 use 方法：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

然后，在 main.js 中使用这个路由器：

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

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

定义路由

在 Vue Router 中，每个路由都是一个对象，至少包含 path 和 component 属性。path 定义了 URL 的路径，component 指定了对应的组件。

嵌套路由

Vue Router 支持嵌套路由，允许你定义更复杂的页面结构：

{
  path: '/user',
  component: User,
  children: [
    {
      path: '',
      component: UserHome,
    },
    {
      path: 'posts',
      component: UserPosts,
    },
  ],
}

路由参数和查询

你可以在路由中定义参数和查询字符串：

// 参数
{
  path: '/user/:id',
  component: User
}

// 查询
{
  path: '/search',
  component: Search
}

在组件中，你可以通过 this.$route.params 和 this.$route.query 访问这些值。

导航守卫

Vue Router 提供了导航守卫（Navigation Guards），允许你在路由发生变化之前或之后执行逻辑：

const router = createRouter({
  // ...路由配置
});

router.beforeEach((to, from, next) => {
  // 在渲染该路由的对应组件之前调用
  if (to.name === 'Profile' && !isAuthenticated) {
    // 重定向到登录页面
    next('/login');
  } else {
    next();
  }
});

懒加载

Vue Router 支持路由组件的懒加载，可以减少应用的初始加载时间：

const routes = [
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
];

使用 `<router-link>` 和 `<router-view>`

在 Vue 应用中，你可以使用 <router-link> 创建导航链接，使用 <router-view> 显示当前路由的组件：

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view/>
  </div>
</template>

Vue Router 是构建单页面应用的强大工具，它提供了丰富的功能来满足复杂的路由需求。通过合理使用 Vue Router，你可以创建出结构清晰、易于维护的前端应用。

Pinia

Pinia 是 Vue.js 的一个状态管理库，它被设计为 Vuex 的替代品，提供了一种更简单、更直观的方式来管理 Vue 应用的状态。以下是 Pinia 的一些核心特性和使用方法：

Pinia 的核心特性

类型安全：Pinia 提供了完全的 TypeScript 支持，使得状态管理在类型层面更加安全。
模块化设计：Pinia 的 Store 是模块化的，每个 Store 都是独立的，可以包含自己的状态、getters 和 actions。
简化的 API：与 Vuex 相比，Pinia 没有 mutations，而是使用 actions 来处理同步和异步的状态更改。
自动注册：Pinia 的 Store 默认情况下创建就自动注册，无需手动注入。
支持 Vue 2 和 Vue 3：Pinia 同时支持 Vue 2 和 Vue 3，提供了一致的 API。
支持插件扩展：Pinia 支持插件系统，可以扩展其功能，例如状态持久化。
支持服务端渲染：Pinia 支持服务端渲染（SSR）。
集成 Vue Devtools：Pinia 与 Vue Devtools 紧密集成，提供了增强的开发体验。

Pinia 的安装和使用

安装 Pinia：

npm install pinia
# 或者使用 yarn
yarn add pinia

在 Vue 应用中注册 Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

创建 Pinia Store：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

在 Vue 组件中使用 Pinia Store：

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()
    return {
      ...counterStore
    }
  }
}