Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
問題描述
在js文件里，直接調(diào)用this.$route獲取路由參數(shù)或者路由跳轉(zhuǎn)，會報(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í)例對象，也是一個(gè)全局的路由對象，里面有很多的屬性和方法，都可以直接用。
router.push(...)
3、獲取路由參數(shù)
router.app._route則等價(jià)于vue實(shí)例文件中的this.$route。route是當(dāng)前正在跳轉(zhuǎn)的路由對象，可以從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)的路由對象，可以從route里面獲取hash，name ，path，query，mathsr ， fullPath等屬性方法
(2) router是VueRouter的實(shí)例對象,也是一個(gè)全局的路由對象，里面有很多的屬性和方法 ，比如：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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue2與Vue3中Ref綁定元素方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能
PDF.js是一個(gè)開源的JavaScript庫,用于在網(wǎng)頁上渲染和顯示PDF文件,在Vue中使用PDF.js來預(yù)覽PDF文件是很常見的需求,這篇文章主要給大家介紹了關(guān)于vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要給大家介紹一下如何使用vue3實(shí)現(xiàn)簡單的滑塊組件,文中有詳細(xì)的代碼示例講解,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
使用yarn?build?打包vue項(xiàng)目時(shí)靜態(tài)文件或圖片未打包成功的問題及解決方法
這篇文章主要介紹了使用yarn?build?打包vue項(xiàng)目時(shí)靜態(tài)文件或圖片未打包成功的問題及解決方法，解決方法不復(fù)雜通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
關(guān)于vue3 vuex4 store的響應(yīng)式取值問題解決
這篇文章主要介紹了vue3 vuex4 store的響應(yīng)式取值問題，在實(shí)際生活中遇到這樣一個(gè)問題:在頁面中點(diǎn)擊按鈕,數(shù)量增加,值是存在store中的,點(diǎn)擊事件值沒變,如何解決這個(gè)問題，本文給大家分享解決方法，需要的朋友可以參考下2022-08-08
vue下載excel的實(shí)現(xiàn)代碼后臺用post方法
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺用post方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了解讀vue分頁面打包方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在這里就不過多說watch的用法了，這篇文章主要通過案例帶大家了解一下如何清除過期的副作用。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-01-01
這篇文章主要介紹了詳解Vue.js入門環(huán)境搭建，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了Vue前端框架搭建過程，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08