第三章：路由导航

声明式导航

router-link

<!-- 基本用法 -->
<router-link to="/">首页</router-link>

<!-- 对象形式 -->
<router-link :to="{ path: '/about' }">关于</router-link>

<!-- 命名路由 -->
<router-link :to="{ name: 'User', params: { id: 1 } }">用户</router-link>

<!-- 带查询参数 -->
<router-link :to="{ path: '/search', query: { q: 'vue' } }">搜索</router-link>

激活状态

<router-link to="/" active-class="active" exact-active-class="exact-active">
  首页
</router-link>

编程式导航

基本方法

import { useRouter } from 'vue-router'

const router = useRouter()

// 导航到指定路由
router.push('/home')
router.push({ path: '/home' })
router.push({ name: 'User', params: { id: 1 } })

// 替换当前路由
router.replace('/home')

// 前进/后退
router.go(1)   // 前进
router.go(-1)  // 后退
router.back()  // 后退
router.forward() // 前进

导航传参

// params 传参
router.push({ name: 'User', params: { id: 1 } })

// query 传参
router.push({ path: '/search', query: { q: 'vue' } })

获取路由信息

useRoute

import { useRoute } from 'vue-router'

const route = useRoute()

// 获取参数
console.log(route.params.id)
console.log(route.query.q)

// 获取路径
console.log(route.path)
console.log(route.fullPath)

// 获取路由名称
console.log(route.name)

小结

路由导航要点：

• 声明式导航：router-link
• 编程式导航：push、replace、go
• 导航传参：params、query
• 获取路由信息：useRoute

下一章我们将学习嵌套路由。