Vue Router（1）

RouterLink 和 RouterView

RouterLink 是一个导航组件，用于在不重新加载页面的情况下切换视图。
RouterView 是一个视图渲染容器组件，用于显示与当前 URL 匹配的组件。

<template>
    <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
    <nav>
        <RouterLink to="/">Go to Home</RouterLink>
        <RouterLink to="/game7">Go to game7</RouterLink>
    </nav>
    <main>
        <RouterView />
    </main>
</template>

$route.fullPath可以展示当前应用所在的路由路径

新建路由

创建路由器实例

创建路由器实例是通过 createRouter() 函数来创建的

//router.js文件
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('./pages/Home.vue'),
        },
        ...
     ]
})

export default router    

注册路由器插件

当创建了路由器实例，就要将其注册为插件，可以通过调用 use() 来完成。

//main.ts文件
import './assets/main.css'

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

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

插件作用：

1. 全局注册 RouterLink 和 RouterView 组件
2. 添加全局 $router 和 $route 属性
3. 启用 useRouter() 和 useRoute() 组合式函数
4. 触发路由器解析初始路由

router 和 route

区别

router

是 Vue Router 的实例，是整个路由系统的核心控制器，用于控制路由。

特点：

1. 通过 createRouter() 创建
2. 全局单例，通常一个应用只有一个 router 实例
3. 提供编程式导航方法
4. 管理路由历史和路由守卫

获取方式：
使用 useRouter() 组合式API

// 编程式导航
router.push('/home')       // 跳转到指定路由
router.replace('/login')   // 替换当前路由
router.go(-1)             // 返回上一页

// 添加导航守卫
router.beforeEach((to, from, next) => {
  // 全局前置守卫逻辑
})

示例：

<template>
    <button @click="goToGame7">Go to game7</button>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goToGame7 = () => {
    router.push('/game7')//跳转到指定路由
}
</script>

route

是一个响应式对象，表示当前激活的路由状态，用于访问当前路由状态。
主要属性：

{
  path: '/user/123',       // 当前路径
  name: 'user-profile',    // 命名路由名称
  params: { id: '123' },   // 路径参数
  query: { search: 'vue' },// 查询参数
  hash: '#info',           // URL hash
  fullPath: '/user/123?search=vue#info', // 完整路径
  matched: [/* 匹配的路由记录数组 */],
  meta: { requiresAuth: true } // 路由元信息
}

可以通过 route 来访问上面的属性。
示例：

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

const route = useRoute()

console.log(route)
</script>

带参数的动态路由匹配

可根据URL中的参数动态渲染组件。

用法

在路由配置中使用冒号 : 标记动态参数

//router.js文件
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/game1/:id',
            //可以匹配 /game1/123，/game1/abc 等
            name: '/game1',
            component: () => import('./pages/game1/index.vue'),
        },
        ...
     ]
})

export default router    

还可以定义多参数路由

const routes = [
  { path: '/user/:username/post/:postId', component: Post }
  // 匹配 /user/abc/post/123
]

访问路由参数

在组件中可以通过 $route.params 访问参数

<template>
  <div>
    <!-- 当前路由可以通过 $route 在模板中访问 -->
    User {{ $route.params.id }}
  </div>
</template>

<script setup>
	import { useRoute } from 'vue-router'
	
	const route = useRoute()
	// 获取参数
	console.log(route.params.id)
</script>

可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。