快捷導(dǎo)航

vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁(yè)面實(shí)現(xiàn)方法

更新時(shí)間：2023年08月02日 11:38:18 作者：ChangYan.

這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁(yè)面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

首先需要對(duì)按鈕綁定一個(gè)函數(shù)，然后在函數(shù)里進(jìn)行頁(yè)面路由的改變。這里要確保項(xiàng)目中已經(jīng)在使用vue-router。如圖，我想要跳轉(zhuǎn)到這個(gè)index.vue頁(yè)面

那么按鈕綁定的函數(shù)里的路徑應(yīng)該這么寫：

然后需要在router文件夾下的index.js里進(jìn)行該頁(yè)面的注冊(cè)：

最主要的是我紅框里的內(nèi)容

代碼如下

  {
    path: '/directory',
    component: Layout,
    name: 'Directory',
    meta: {
      title: 'Directory',
      icon: 'el-icon-s-cooperation'
    },
    redirect: '/directory/index',
    children: [
      {
        path: '',
        name: 'Directory',
        component: () => import('@/views/directory/index'),
        meta: { title: 'navRoute.directory', icon: 'el-icon-s-cooperation', roles: ['user'] }
      },
      {
        path: 'newfilter/index',
        name: 'Newfilter',
        hidden: true,
        component: () => import('@/views/directory/newfilter/index'),
        meta: { title: 'navRoute.newfilter', roles: ['user'] }
      },
      { path: '*', redirect: 'directory/index', hidden: true }
    ]
  },

然后就可以跳轉(zhuǎn)成功啦！

總結(jié)

到此這篇關(guān)于vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁(yè)面實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊按鈕跳轉(zhuǎn)vue頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
一文詳解vue項(xiàng)目如何使用mqtt通信
在現(xiàn)代Web開發(fā)中,實(shí)時(shí)通信變得越來越重要,MQTT是一種輕量級(jí)的消息傳輸協(xié)議,廣泛應(yīng)用于物聯(lián)網(wǎng)(IoT)和實(shí)時(shí)通信場(chǎng)景,這篇文章主要介紹了vue項(xiàng)目如何使用mqtt通信的相關(guān)資料,需要的朋友可以參考下
2026-03-03
vue使用mpegts.js的詳細(xì)步驟記錄
MPEGTS.js是一個(gè)輕量級(jí)的JavaScript庫(kù),用于處理MPEG-TS流,這篇文章主要給大家介紹了關(guān)于vue使用mpegts.js的詳細(xì)步驟記錄,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
vue+flask實(shí)現(xiàn)視頻合成功能(拖拽上傳)
這篇文章主要介紹了vue+flask實(shí)現(xiàn)視頻合成功能(拖拽上傳),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
Vue全屏模式下彈窗顯示的解決過程
Vue全屏模式下彈窗顯示問題源于層疊上下文與z-index沖突,解決方案需動(dòng)態(tài)切換Teleport掛載點(diǎn)至全屏元素,強(qiáng)制應(yīng)用最高z-index和!important樣式,確保彈窗穿透全屏層并兼容多瀏覽器
2025-07-07
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue使用引用庫(kù)中的方法附源碼
當(dāng)vue使用庫(kù)中的getvalue方法時(shí)，需要調(diào)用相關(guān)方法，通過定義ref=“”，使用this.$refs.exampleEditor._setValue('')，具體示例代碼參考下本文，對(duì)vue使用引用庫(kù)中的方法，感興趣的朋友一起看看吧
2021-07-07
vue組件（全局，局部，動(dòng)態(tài)加載組件）
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動(dòng)態(tài)加載組件）,需要的朋友可以參考下
2018-09-09
vue 修改vant自帶的樣式過程
這篇文章主要介紹了vue 修改vant自帶的樣式過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
VSCode前端Vue項(xiàng)目引入Element-ui組件三步簡(jiǎn)單操作方法
elementui相當(dāng)于一個(gè)庫(kù),封裝好的內(nèi)容,我們引入到vue項(xiàng)目中,就可用庫(kù)中的內(nèi)容,這篇文章主要給大家介紹了關(guān)于VSCode前端Vue項(xiàng)目引入Element-ui組件的三步簡(jiǎn)單操作方法,需要的朋友可以參考下
2024-07-07