router新页面打开vue3

在 Vue3 中，使用路由器 (router) 来导航到新的页面通常涉及到Vuex 和Vue Router 的结合。以下是一个基本流程：

1. **安装依赖**：首先需要安装 `vue-router` 和 `vuex`。可以使用 npm 或者 yarn 进行安装：

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

2. **创建路由配置**：在 `src/router/index.js` 文件中，定义你的路由结构，例如：

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from '@/views/Home.vue'
   // 添加其他页面

   const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home,
     },
     // 更多路由...
   ]

   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL), // 使用浏览器历史API
     routes,
   })

   export default router

3. **Vue组件中导航**：在需要导航的地方，通过注入的 `$router` 对象进行跳转：

   <template>
     <!-- ... -->
     <button @click="goToNewPage">去新页面</button>
   </template>

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

   export default {
     setup() {
       const route = useRoute()
       const goToNewPage = () => {
         router.push('/new-page') // 替换为你要跳转的实际路径
       }
       return { goToNewPage }
     },
   }
   </script>

4. **Vuex 存储状态**：如果新页面的状态需要从全局状态管理，你可以将状态保存在 Vuex store 中，并通过 actions 和 mutations 控制页面切换。