vue常見路由跳轉(zhuǎn)的幾種方式小結(jié)
常見的路由跳轉(zhuǎn)有以下四種：
1. <router-link to="跳轉(zhuǎn)路徑">
/* 不帶參數(shù) */
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
// 更建議用name
// router-link鏈接中，帶'/' 表示從根路徑開始，不帶 表示從當(dāng)前路由開始
/* 帶參 */
// 1. params傳參
<router-link :to="{name:'home', params: {id:1}}">
// 路由配置 用 path: "/home/:id" 或者 path: "/home:id"
// 配置path，刷新頁面參數(shù)保留；不配置path，刷新頁面后 參數(shù)會(huì)消失
// html 取參 $router.params.id
// script 取參 this.$router.params.id
// 2 query傳參
<router-link :to="{name:'home', query: {id:1}}">
// 路由可不配置
// html 取參 $router.query.id
// script 取參 this.$router.query.id也可，如
2. this.$router.push() 跳轉(zhuǎn)到指定的url，并在history中添加記錄（即，點(diǎn)擊回退，會(huì)退回上一個(gè)頁面）。
/* 不傳參 或 query傳參 */
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home', query: {id:'1'}})
/* params傳參 */
this.$router.push({name:'home', params: {id:'1'}})
this.$router.push({path:'/home', params: {id:'1'}})
//注： params傳參只能用name
//配置path，刷新頁面參數(shù)保留；不配置path，刷新參數(shù)消失
/* query和params的區(qū)別 */
// query類似于 get 請(qǐng)求，跳轉(zhuǎn)后頁面url會(huì)拼接參數(shù)，如?id=1。-->適用于 非重要的參數(shù)
// params 類似于post，不拼接參數(shù)，刷新頁面后參數(shù)消失。--->適用于 安全性較高的參數(shù)，如密碼
html中，如：
3. this.$router.replace() 跳轉(zhuǎn)到指定的url， 但不會(huì)在history記錄（即，點(diǎn)擊回退 退回到上上個(gè)頁）
4. this.$router.go(n) 向前或向后跳轉(zhuǎn) n 個(gè)頁面，n可正可負(fù)。
使用后三種 需要在<script setup>中 導(dǎo)入
import router from '@/router';
參考：路由之間跳轉(zhuǎn)的方式_路由跳轉(zhuǎn)幾種方式_時(shí)間管理maste的博客-CSDN博客
路由跳轉(zhuǎn)幾種方法_路由跳轉(zhuǎn)的方式有哪幾種_丶凡人的博客-CSDN博客
到此這篇關(guān)于vue常見路由跳轉(zhuǎn)的幾種方式小結(jié)的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)網(wǎng)頁語言國際化切換
這篇文章介紹了vue實(shí)現(xiàn)網(wǎng)頁語言國際化切換的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-11-11
這篇文章主要給大家介紹了關(guān)于如何利用VUE創(chuàng)建視頻流應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能
這篇文章主要介紹了vue iview實(shí)現(xiàn)動(dòng)態(tài)路由和權(quán)限驗(yàn)證功能，動(dòng)態(tài)路由控制分為兩種：一種是將所有路由數(shù)據(jù)存儲(chǔ)在本地文件中，另一種則是本地只存儲(chǔ)基本路由，具體內(nèi)容詳情大家參考下此文2018-04-04
vue-electron使用serialport時(shí)問題解決方案
這篇文章主要介紹了vue-electron使用serialport時(shí)問題解決方案,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了如何理解Vue的.sync修飾符的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，今天通過本文給大家分享VSCode開發(fā)UNI-APP 配置教程及插件推薦與注意事項(xiàng)，感興趣的朋友一起看看吧2021-08-08
Vue中directive的鉤子函數(shù)(bind,inserted等)用法及使用說明
Vue指令鉤子函數(shù)（bind、inserted等）用于在不同階段操作元素,bind綁定時(shí)初始化,inserted插入DOM后執(zhí)行,update值變化時(shí)觸發(fā),componentUpdated全部更新后調(diào)用,unbind解綁時(shí)清理,根據(jù)需求選擇對(duì)應(yīng)鉤子實(shí)現(xiàn)功能增強(qiáng)2025-07-07
詳解vue3?響應(yīng)式的實(shí)現(xiàn)原理
Vue.js?3.0?為了解決?Object.defineProperty?的這些缺陷，使用?Proxy?API?重寫了響應(yīng)式部分，并獨(dú)立維護(hù)和發(fā)布整個(gè)?reactivity?庫，這篇文章主要介紹了vue3?響應(yīng)式的實(shí)現(xiàn)原理,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue父子組件的通信的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
前端vue項(xiàng)目打包及部署過程的詳細(xì)說明
Vue前端項(xiàng)目的打包和部署是一個(gè)常見的開發(fā)流程,涉及多個(gè)步驟和配置,下面這篇文章主要介紹了前端vue項(xiàng)目打包及部署過程的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09