什么是編程式導(dǎo)航？

在上篇博客Vue3 Router 監(jiān)聽路由參數(shù)變化中，我們使用 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接：

<router-link to="/about"> 【about】 </router-link>
<router-link to="/home"> 【home】 </router-link>

除了 <router-link>，我們還可以借助 router 的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)：

1：跳轉(zhuǎn)到指定路徑
router.push('/users/eduardo')

2：替換當(dāng)前路徑
router.replace({ path: '/home' })

3：橫跨歷史
router.go(1)//向前移動一條記錄，與 router.forward() 相同
router.go(-1)//返回一條記錄，與 router.back() 相同

router.push

router.push方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時，會回到之前的 URL。

我們接著上篇博客Vue3 Router 監(jiān)聽路由參數(shù)變化的案例來講。

1 簡單的跳轉(zhuǎn)

About.vue文件：

<template>
  <p>我是About頁面</p>
</template>

<script setup lang="ts">
</script>

Home.vue文件：

<template>
  <p>我是Home頁面</p>
  <el-button @click="goToAbout">go to about</el-button>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import {ref} from "vue";

const router = useRouter()

function goToAbout(){
  //router.push('/about')
  router.push({ path: '/about' })
}
</script>

router配置文件：

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'

export const routes: Array<RouteRecordRaw> = [
    {
        path: '/home',
        component: () => import('@/views/Home.vue')
    },
    {
        path: '/about',
        component: () => import('@/views/About.vue')
    }
    ,
    {
        path: '/user/:id',
        name: 'user',
        component: () => import('@/views/User.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes: routes as RouteRecordRaw[]
})

export default router

2 帶params參數(shù)的跳轉(zhuǎn)

• 對于路徑：/user/1、/user/2，會匹配到路由/user/:id，這個id的值可用$route.params.id取到

創(chuàng)建User.vue文件：

<template>
  <p>
    $route.params.id：{{$route.params.id}}
  </p>
</template>

<script setup lang="ts">
</script>

修改Home.vue文件：

<template>
  <p>我是Home頁面</p>
  <el-button @click="goToUser">go to user</el-button>
  <el-input v-model="userId" placeholder="輸入用戶Id"></el-input>
</template>

<script setup lang="ts">
import { useRouter} from 'vue-router'
import {ref} from "vue";

const router = useRouter()
const userId = ref();

function goToUser(){
  //router.push({ path: '/user/' + userId.value})
  //命名的路由，并加上參數(shù)，讓路由建立 url
  router.push({ name: 'user', params: {id: userId.value}})
}
</script>

下面的兩句的效果是一樣的

router.push({ path: '/user/' + userId.value})
router.push({ name: 'user', params: {id: userId.value}})

要非常注意的是：

• 第二個是name + params的組合使用
• 如果是path + params的組合式不可以的，因?yàn)槿绻峁┝?code>path，則params 會被忽略

這個寫法是錯誤的！錯誤的！錯誤！
router.push({ path: '/user/', params: {id: userId.value}})

3 帶query查詢參數(shù)的跳轉(zhuǎn)

• 對于路徑：/user?id=1、/user?id=2，會匹配到路由/user，這個id的值可用$route.query.id取到

修改router的配置，path: '/user/:id'改成path: '/user'

{
     path: '/user',
     name: 'user',
     component: () => import('@/views/User.vue')
}

修改Home.vued的goToUser方法

function goToUser(){
  router.push({ path: '/user', query: { id: userId.value }  })
}

User.vue文件中用$route.query.id替換$route.params.id

<template>
  <p>
    $route.query.id：{{$route.query.id}}
  </p>
</template>

router.replace

它的作用類似于 router.push，唯一不同的是，它在導(dǎo)航時不會向 history 添加新記錄，正如它的名字所暗示的那樣——它取代了當(dāng)前的條目。

修改Home.vue文件如下：

<template>
  <p>我是Home頁面</p>
  <el-button @click="$router.push('/about')">push to about</el-button>
  <el-button @click="$router.replace('/about')">replace to about</el-button>
</template>

運(yùn)行結(jié)果如下：

router.go

該方法采用一個整數(shù)作為參數(shù)，表示在歷史堆棧中前進(jìn)或后退多少步，類似于 window.history.go(n)。文章來源地址http://www.zghlxwxcb.cn/news/detail-468669.html

// 向前移動一條記錄，與 router.forward() 相同
router.go(1)

// 返回一條記錄，與 router.back() 相同
router.go(-1)

// 前進(jìn) 3 條記錄
router.go(3)

// 如果沒有那么多記錄，靜默失敗
router.go(-100)
router.go(100)

到了這里，關(guān)于前端筆記(11) Vue3 Router 編程式導(dǎo)航 router.push router.replace的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！