1. 安装 Vue Router 4

npm install vue-router@4
# 或
yarn add vue-router@4

2. 创建路由配置文件

在src目录下创建router文件夹，并在其中创建index.js文件：

import { createRouter, createWebHistory } from 'vue-router'

// 导入需要的组件
import NormalHomePage from '@/pages/NormalHomePage.vue'
import About from '@/pages/About.vue'
import FundRankList from '@/pages/FundRankList.vue'

// 定义路由规则
const routes = [
  {
    // 这是默认路径
    path: '/',
    name: 'NormalHomePage',
    component: NormalHomePage
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/fund-rank-list',
    name: 'FundRankList',
    component: FundRankList,
    props: true // 允许通过路由传递props
  }
]

// 创建路由实例
const router = createRouter({
  // 选择路由模式：hash 或 history
  // createWebHashHistory()  // 使用 hash 模式 (带 # 号)
  history: createWebHistory(process.env.BASE_URL), // 使用 history 模式 (需要后端支持)
  routes
})

// 全局路由守卫（可选）
router.beforeEach((to, from, next) => {
  // 可以在这里添加权限验证等逻辑
  console.log('即将跳转到：', to.name)
  next()
})

export default router

3. 在main.js中配置路由

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 导入路由配置
import router from './router'

// 1. 先创建Pinia实例
const pinia = createPinia()
const app = createApp(App)

// 2. 先使用Pinia
app.use(pinia)

// 3. 使用路由
app.use(router)

// 挂载应用
app.mount('#app')

4. 在App.vue中添加路由视图

<template>
  <div id="app">
    <!-- 路由出口：渲染当前路由对应的组件 -->
    <router-view />
  </div>
</template>

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

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

5. 在组件中使用路由

在组件中跳转路由

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    
    // 跳转到指定路由
    const navigateToAbout = () => {
      router.push('/about')
    }
    
    // 带参数跳转
    const goToFundRank = (id) => {
      router.push({
        name: 'FundRankList',
        params: { id }
      })
    }
    
    return {
      navigateToAbout,
      goToFundRank
    }
  }
}

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    
    // 获取路由参数
    const fundId = route.params.id
    
    return {
      fundId
    }
  }
}