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,刷新頁(yè)面參數(shù)保留;不配置path,刷新頁(yè)面后 參數(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è)頁(yè)面)。
/* 不傳參 或 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,刷新頁(yè)面參數(shù)保留;不配置path,刷新參數(shù)消失 /* query和params的區(qū)別 */ // query類似于 get 請(qǐng)求,跳轉(zhuǎn)后頁(yè)面url會(huì)拼接參數(shù),如?id=1。-->適用于 非重要的參數(shù) // params 類似于post,不拼接參數(shù),刷新頁(yè)面后參數(shù)消失。--->適用于 安全性較高的參數(shù),如密碼
html中,如:
3. this.$router.replace() 跳轉(zhuǎn)到指定的url, 但不會(huì)在history記錄(即,點(diǎn)擊回退 退回到上上個(gè)頁(yè))
4. this.$router.go(n) 向前或向后跳轉(zhuǎn) n 個(gè)頁(yè)面,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)文章
vuex實(shí)現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法
今天小編就為大家分享一篇vuex實(shí)現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式
這篇文章主要介紹了elementUI下拉框?qū)崿F(xiàn)隱藏時(shí)觸發(fā)相關(guān)事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡(jiǎn)單且高效的方式來構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧2023-10-10淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05