Python私教张大鹏 Vue3整合Vue Router之编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

导航到不同的位置

注意: 下面的示例中的 router 指代路由器实例。在组件内部，你可以使用 $router 属性访问路由，例如 this.$router.push(...)。如果使用组合式 API，你可以通过调用 useRouter() 来访问路由器。

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

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

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

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

美化页面样式

<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200">
      左
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

通过router-link跳转

<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200 flex flex-col">
      <router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">首页</router-link>
      <router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">关于</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

通过按钮点击跳转首页

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

const router = useRouter()
const clickToIndex = () => {
  router.push("/index")
}
</script>
<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200 flex flex-col">
      <router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        首页
      </router-link>
      <router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        关于
      </router-link>
      <button
          class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
          @click="clickToIndex"
      >按钮：首页
      </button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

路径对象

const clickToIndex = () => {
  //router.push("/index")
  router.push({path: "/index"})
}

通过按钮点击跳转关于页面

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

const router = useRouter()
const clickToIndex = () => {
  //router.push("/index")
  router.push({path: "/index"})
}
const clickToAbout = () => {
  router.push({path: "/about"})
}
</script>
<template>
  <div class="h-12 bg-indigo-50 flex justify-center items-center">上</div>
  <div class="flex min-h-72 bg-teal-50">
    <div class="min-w-36 bg-purple-200 flex flex-col">
      <router-link to="/index" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        首页
      </router-link>
      <router-link to="/about" class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center">
        关于
      </router-link>
      <button
          class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
          @click="clickToIndex"
      >按钮：首页
      </button>
      <button
          class="flex-1 h-12 bg-red-300 hover:bg-indigo-500 flex justify-center items-center"
          @click="clickToAbout"
      >按钮：关于
      </button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

在这里插入图片描述

通过路径传参

const clickToAbout = () => {
  router.push({path: "/about/123", query: {"id": "333"}})
}

使用命名路由

const clickToAbout = () => {
  router.push({name: "layout_about", params: {"id": "333"}, query: {"id": "333"}})
}

替换当前位置

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

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

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

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

横跨历史

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

例子：

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

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

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

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