Vue Router基本使用、传参、嵌套、守卫全覆盖

npm i vue-router

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

// 导入页面组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
// 创建路由实例，配置路由表
const router = createRouter({
  // 指定路由模式为哈希模式
  history: createWebHashHistory(),
  // 路由表：路径与组件的映射关系
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend }
  ]
})

const app = createApp(App)
app.use(router)   // 注册路由
app.mount('#app')

<script setup></script>
<template>
  <div class="find">
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐...</p>
  </div>
</template>

<script setup></script>
<template>
  <!-- 路由出口：匹配到的组件会渲染在这里 -->
  <router-view />
</template>

浏览器 URL 变化
      ↓
与 routes 数组中的 path 逐一匹配
      ↓
  命中？ ──── 是 ──→ 将对应 component 渲染到 <router-view /> 的位置
      ↓
     否
      ↓
  显示空白页面（或 404 页面）

import { createRouter, createWebHashHistory } from 'vue-router'
// @ 代指 src 的绝对路径，方便导入模块
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend }
  ]
})
// 默认导出 router 实例
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'    // 导入封装好的路由模块
const app = createApp(App)
app.use(router)                  // 注册
app.mount('#app')

<template>
  <nav>
    <router-link to="/find">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friend">朋友</router-link>
  </nav>
  <router-view />
</template>

/* 模糊匹配高亮——适合父级导航 */
nav a.router-link-active {
  background: red;
  color: #fff;
}

<!-- 方式一：字符串拼接 -->
<router-link to="/friend?id=10086">朋友</router-link>
<!-- 方式二：对象写法（最终仍会转为字符串） -->
<router-link
  :to="{
    path: '/friend',
    query: { id: 10086 }
  }">
  朋友
</router-link>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()  // 获取当前激活的路由对象
</script>

<template>
  <p>当前朋友的 id = {{ route.query.id }}</p>
</template>

routes: [
  {
    name: 'Friend',          // 命名路由，传对象时必须用 name
    path: '/friend/:fid',    // :fid 是动态参数占位符
    component: Friend
  }
]

<!-- 方式一：直接拼接在路径中 -->
<router-link to="/friend/10010">朋友</router-link>
<!-- 方式二：对象写法，必须使用命名路由 name -->
<router-link
  :to="{
    name: 'Friend',
    params: { fid: 10010 }
  }">
  朋友
</router-link>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>
<template>
  <p>当前朋友 id = {{ route.params.fid }}</p>
</template>

routes: [
  // 访问 / 时，强制跳转到 /find
  { path: '/', redirect: '/find' },
  { path: '/find', component: Find },
  // ...
]

<script setup></script>
<template>
  <div class="_404">
    <h4>Not Found</h4>
    <p>你访问的页面去了月球</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

routes: [
  { path: '/', redirect: '/find' },
  { path: '/find', component: Find },
  { path: '/my', component: My },
  { path: '/friend', component: Friend },
  // 放在最后！前面都不匹配时才会命中
  { path: '/:pathMatch(.*)*', component: _404 }
]

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),  // 切换到历史模式
  routes: [ /* ... */ ]
})

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()  // 路由实例（createRouter 的返回值），负责"跳转"
const route = useRoute()    // 当前激活的路由对象，负责"取参"

// 字符串方式
router.push('/find')
// 对象方式
router.push({ path: '/find' })

// 方式一：字符串
router.push('/friend?id=10086')
// 方式二：对象
router.push({ path: '/friend', query: { id: 10086 } })

// 方式一：字符串
router.push('/friend/10010')
// 方式二：对象（必须用 name）
router.push({ name: 'Friend', params: { id: 10010 } })

import Recommend from '@/views/Recommend.vue'
import TopList from '@/views/TopList.vue'
import PlayList from '@/views/PlayList.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: '/find' },
    {
      path: '/find',
      component: Find,
      redirect: '/find/recommend',   // 进入 /find 时默认展示"推荐"
      children: [
        { path: 'recommend', component: Recommend },  // 注意：子路由 path 不加 /
        { path: 'toplist', component: TopList },
        { path: 'playlist', component: PlayList }
      ]
    },
    { path: '/my', component: My },
    { path: '/friend', component: Friend }
  ]
})

<template>
  <div class="find">
    <nav>
      <router-link to="/find/recommend">推荐</router-link>
      <router-link to="/find/toplist">排行榜</router-link>
      <router-link to="/find/playlist">歌单</router-link>
    </nav>
    <!-- 二级路由出口：子路由的组件渲染在这里 -->
    <router-view />
  </div>
</template>

router.beforeEach((to, from) => {
  // to：目标路由对象（要去哪里）
  // from：当前路由对象（从哪里来）
  // 返回 true 或 undefined → 放行
  // 返回 false → 阻止导航
  // 返回一个路径字符串或路由对象 → 重定向到指定页面
})

// 模拟登录状态（实际项目中从 store 或 localStorage 获取）
const isLogin = false
router.beforeEach((to, from) => {
  // 未登录 且 想去"我的音乐"页面
  if (!isLogin && to.path === '/my') {
    alert('请先登录')
    return false   // 阻止跳转
  }
  // 其他情况一律放行
  return true
})