Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
問題描述
在js文件里，直接調(diào)用this.$route獲取路由參數(shù)或者路由跳轉(zhuǎn)，會(huì)報(bào)錯(cuò)！
解決方案：
1、需要先在js文件里另外引入router
import router from '@/router'
2、路由跳轉(zhuǎn)，或相關(guān)方法調(diào)用
router等價(jià)于vue實(shí)例文件中this.$router。router是VueRouter的實(shí)例對(duì)象，也是一個(gè)全局的路由對(duì)象，里面有很多的屬性和方法，都可以直接用。
router.push(...)
3、獲取路由參數(shù)
router.app._route則等價(jià)于vue實(shí)例文件中的this.$route。route是當(dāng)前正在跳轉(zhuǎn)的路由對(duì)象，可以從route里面獲取hash，name ，path，query等屬性
router.app._route.query router.app._route.params
附：vue項(xiàng)目中在外部js文件中獲取當(dāng)前頁面的路由名route.name
首先我想先說明一下，在vue里面router和route的區(qū)別：
(1)route是當(dāng)前正在跳轉(zhuǎn)的路由對(duì)象，可以從route里面獲取hash，name ，path，query，mathsr ， fullPath等屬性方法
(2) router是VueRouter的實(shí)例對(duì)象,也是一個(gè)全局的路由對(duì)象，里面有很多的屬性和方法 ，比如：router.push,route.options等等。
但是在js文件中 我們不好直接使用this.$route來直接獲取到當(dāng)前的路由name, 主要是這個(gè)this指向問題，在這里我通過了router來獲取
1、在js文件中引入router
import router from '@/router/index'
2、在router獲取到route獲取
let routerName = router.app._route.name;
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)js獲取路由參數(shù)及路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3?中的?watchEffect?特性詳解,watchEffect?是?Vue3?中非常有用的一個(gè)特性，它可以讓我們輕松地監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行指定的回調(diào)函數(shù)，從而簡(jiǎn)化代碼并提高應(yīng)用的性能，需要的朋友可以參考下2023-04-04
element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)
本文主要介紹了element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了解決Vue router-link綁定事件不生效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼
這篇文章主要介紹了Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue封裝第三方插件并發(fā)布到npm的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue 實(shí)現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）
這篇文章主要介紹了Vue 實(shí)現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue遞歸生成樹狀結(jié)構(gòu)的示例,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07