vue Router 编程式导航

在前面学习中一直使用的声明式导航，在这里开始学习编程式导航

push导航, 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

声明式导航

<template>
	// 字符串路径
  <router-link to="/user">1</router-link>
  // 带有路径的对象
  <router-link :to="{ path:'/user'}">2</router-link>
  // 命名的路由
  <router-link :to="{ name:'User'}">3</router-link>
  // 命名的路由，并加上Restful风格传参，让路由建立 url
  <router-link :to="{ name:'User', params:{userid:123, username:'张三'}}">4</router-link>
  // 命名的路由，并加上传统风格传参，让路由建立 url
  <router-link :to="{ name:'User', query:{userid:123, username:'张三'}}">5</router-link>
  // 带 hash，结果是 /user#edit
  <router-link :to="{ name:'User', hash:'#edit'}">5</router-link>
  <router-view></router-view>
</template>

编程式导航

// 组合式
import {
    
    useRouter} from 'vue-router'

const router = useRouter()
router.push('/user')
router.push({
    
    path: '/user'})
router.push({
    
    name: 'User'})
router.push({
    
    name: 'User', params: {
    
    userid: 123, username: '张三'}})
router.push({
    
    name: 'User', query: {
    
    userid: 123, username: '张三'}})
router.push({
    
    name: 'User', hash:'#edit'})

// 选项式
this.$router.push('/user')
this.$router.push({
    
    path: '/user'})
this.$router.push({
    
    name: 'User'})
this.$router.push({
    
    name: 'User', params: {
    
    userid: 123, username: '张三'}})
this.$router.push({
    
    name: 'User', hash:'#edit'})

replace方式导航，它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

声明式	编程式
<router-link :to="..." replace>	router.replace(...)

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ：

router.push({
    
     path: '/home', replace: true })
// 相当于
router.replace({
    
     path: '/home' })

go方式导航，该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

篡改历史

你可能已经注意到，router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。
因此，如果你已经熟悉 Browser History APIs，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。
值得一提的是，无论在创建路由器实例时传递什么样的 history 配置，Vue Router 的导航方法( push、replace、go )都能始终正常工作。