编程式导航

@useRouter()

Introduction

. 除了使用 <RouterLink> 创建声明式路由，还可以借助全局路由变量 $router 或路由器 router 的实例方法实现编程式路由

. Vue-router 提供的组合式函数；适用 Vue 3 的 Composition API

编程式路由

$router

. 全局路由变量

. 可以在模板/结构中直接使用 - 更方便、更简洁

<button @click="$router.push('/home')">返回首页</button>

<button @click="$router.back()">后退</button>

<button @click="$router.forward()">前进</button>

. 动态路由

<button @click="$router.replace('/details/1')">to details</button>

<button @click="$router.push('/details/' + id)">to details</button>

<button @click="$router.push(`/details/${id}`)">to details</button>

<button @click="$router.push({ name: 'details', params: { id: 1 } })">to details</button>

<button @click="$router.push({ name: 'details', params: { id } })">to details</button>

. 查询路由

<button @click="$router.push('/menu/goods?id=100')">to goods</button>

<button @click="$router.push('/menu/goods?id=' +100)">to goods</button>

<button @click="$router.push(`/menu/goods?id=${id}`)">to goods</button>

<button @click="$router.push({ name: 'goods', query: { id: 100 } })">to goods</button>

<button @click="$router.push({ name: 'goods', query: { id } })">to goods</button>

推荐使用对象的方式

请比较和 <RouterLink> 的区别

useRouter()

. 是全局注入的函数，用于获取路由器实例，以便操作路由，如压栈 push、替换 replace、前进 go 等；和上述方法分别一一对应

. 需引入路由包 useRouter 并创建路由实例 router

. 通常在事件处理函数中使用

import { useRouter } from 'vue-router'
const router = useRouter()

常用实例方法
分类	说明
push()	导航时向 history 添加新记录\|压入路由，并跳转到目标；单击 <RouterLink> 时触发；可以逐级返回 Programmatically navigate to a new URL by pushing an entry in the history stack
replace()	导航时不会向 history 添加新记录，替换\|取代了当前的条目；不可返回 Programmatically navigate to a new URL by replacing the current entry in the history stack
go(n)	导航到历史记录中的特定位置；可以前进或后退；参数 n 是一个整数，相对于当前位置的偏移量 Allows you to move forward or backward through the history. Calls history.go().
back()	后退一级；相当于 go(-1) Go back in history if possible by calling history.back(). Equivalent to router.go(-1).
forward()	前进一级；相当于 go(1) Go forward in history if possible by calling history.forward(). Equivalent to router.go(1).

[] 单击跳转到首页

// 普通路由 
const toHome = () => {
  router.push('/home')
}

其它应用 - 同声明式导航

// 查询路由 /register?plan=private
router.push('/user?id=100')
router.push({ path: '/user', query: { id: 100 } })

// 动态路由
// 直接拼接
router.push('/user/100')
// id = 100
router.push('/user/' + id.value)
// 使用模板字符串
router.push(`/details/${id.value}`)
// 使用对象 - 只能使用命名路由 name
router.push({ name: 'details', params: { id: id.value } })
router.push({ name: 'user', params: { id: 100 } })

// 使用路由其它属性，如 replace 禁止返回路由
router.push({ path: '/user', query: { id: 100 }, replace: true })
router.replace({ path: '/user', query: { id: 100 } })

Drill

[] 产品组件 GoodsItem.vue导航到产品详情页 DetailView.vue - 编程式导航版

路由设计

{
  path: '/details/:id',
  component: () => import('@/views/DetailsView.vue'),
}

方案1：直接在结构中导航

<div class="goods-item" @click.stop="$router.push('/details/' + product.id)">
  // ...
</div>

方案2：在逻辑中导航

<div class="goods-item" @click.stop="toDetails(product.id)">
  // ...
</div>

import { useRouter } from 'vue-router'
const router = useRouter()
const toDetails = (id) => {
  router.push('/details/' + id)
}

Summary & Homework

Summary

结构中使用 - 直接使用全局路由变量 $router

逻辑中使用 - 引入路由包 useRouter 并实例 router

Homework

[] 数据加载完毕后跳转至首页 - 在生命周期函数中，使用延时 setTimeout 模拟实现

//引入
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

//使用 
const router = useRouter()
onMounted(()=>{
  setTimeout(()=>{
    //router.push('/home')
    router.replace('/home') //这里通常使用replace模式
  }, 3000)
})

如何优化代码？