Vue3如何獲取來源路由
更新時間：2024年07月02日 11:08:47 作者：gaolei_eit
這篇文章主要介紹了Vue3如何獲取來源路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue3獲取來源路由
//路由 兩個必須是同級路由
{
path: "/room",
name: "Room",
component: () => import("@/views/Room/index.vue"),
meta: {
title: "房間"
},
beforeEnter: (to, from, next) => {
const name = from.name as string;
if (["RoomHistory", "Room"].includes(name)) {
to.params.from = "RoomHistory";
} else {
to.params.from = "other";
}
next();
}
},
//頁面
console.log(route.params.from, "route.params.from");Vue3獲取當(dāng)前路由參數(shù)
<script>
import {useRouter, useRoute} from 'vue-router'
export default {
setup(){
// 獲取路由器實例
const router = useRouter()
//使用
//router.push..... 等等方法
// route響應(yīng)式對象，監(jiān)控變化，傳值
const route = useRoute
//獲取 處理route.query 等等
}
}
</script>Vue3獲取所有路由
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
console.log(router.getRoutes());總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue函數(shù)input輸入值請求時延遲1.5秒請求問題
這篇文章主要介紹了vue函數(shù)input輸入值請求時延遲1.5秒請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷的相關(guān)資料,對vue來說index.html是一個總的入口文件,vue是單頁面應(yīng)用,掛在id為app的div下然后動態(tài)渲染路由模板,需要的朋友可以參考下2023-09-09
Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下2023-06-06
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01
elementui源碼學(xué)習(xí)之仿寫一個el-divider組件
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫一個el-divider組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vscode下的vue文件格式化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Element plus實現(xiàn)圖片手動上傳與回顯的過程
近期,發(fā)現(xiàn)點擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實現(xiàn)圖片手動上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-09-09
vue+render+jsx實現(xiàn)可編輯動態(tài)多級表頭table的實例代碼
這篇文章主要介紹了vue+render+jsx實現(xiàn)可編輯動態(tài)多級表頭table的實例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的工作或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue3(vite)設(shè)置代理封裝axios api解耦功能
這篇文章主要介紹了vue3（vite）設(shè)置代理封裝axios api解耦,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12