pinia怎么跳转页面

在 Pinia 中，要实现页面的跳转，你可以使用路由库，比如 Vue Router。

首先，确保你已经安装了 Vue Router。然后，在你的项目中创建一个路由文件，例如 `router.js`，并在其中配置你的路由信息。

// router.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '路径/到/你的/Home.vue';
import About from '路径/到/你的/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

接下来，在你的应用程序主文件中（例如 `main.js`），将路由与 Pinia 结合使用。

// main.js

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

const app = createApp(App);
const pinia = createPinia();

app.use(router);
app.use(pinia);

app.mount('#app');

现在，你可以在组件中使用 `<router-link>` 标签来创建导航链接，并使用 `$router.push()` 方法进行编程式导航。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    },
  },
};
</script>

这样，当用户点击导航链接或按钮时，页面将会根据路由进行跳转。

请注意，上述示例中的路径和组件名称是示意性的，你需要根据你的实际情况进行相应的配置和修改。