首頁 > web前端 > 前端問答 > vue怎樣跳轉子路由

vue怎樣跳轉子路由

PHPz
發布: 2023-04-18 10:06:27
原創
2397 人瀏覽過

Vue是一款流行的前端框架,它使用組件化的方式來建立應用程式。 Vue路由器是Vue提供的一個插件,可以方便地將應用程式劃分為多個視圖,並且允許使用者在視圖之間進行導航。在Vue路由器中,每一個視圖都是一個路由,每一個路由都可以有多個子路由。本文將介紹如何跳轉子路由。

  1. 宣告子路由

在Vue路由器中宣告子路由需要使用到嵌套路由。在父路由中使用children欄位來聲明子路由。例如:

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})
登入後複製

在上述程式碼中,我們宣告了一個名為parent的父路由,和一個名為child的子路由。當使用者存取/parent/child時,將會渲染Parent和Child元件。

  1. 跳轉子路由

在Vue中跳轉路由可以使用router-link元件或使用$router物件的編程式導覽。在跳轉子路由時,我們需要提供完整的路由路徑。例如,要跳到上述範例中的子路由,我們需要提供/parent/child的完整路由路徑。

使用router-link:

<router-link to="/parent/child">跳转到子路由</router-link>
登入後複製

使用編程式導航:

this.$router.push('/parent/child')
登入後複製

在上述程式碼中,我們使用了$router.push方法來跳轉路由。

  1. 編程式導航傳遞參數

在實務中,我們經常需要跳轉子路由並且傳遞一些參數。在Vue中,我們可以在編程式導覽中使用params欄位傳遞參數。例如:

this.$router.push({ path: '/parent/child', params: { id: 1 }})
登入後複製

在上述程式碼中,我們傳遞了一個id參數,值為1。在接收參數的子路由元件中,我們可以透過this.$route.params來取得參數。

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}
登入後複製
  1. 結語

本文介紹如何在Vue路由中跳轉子路由。我們介紹如何宣告子路由、如何使用router-link和編程式導航跳轉子路由,以及如何傳遞參數。希望本文對初學者有幫助。

以上是vue怎樣跳轉子路由的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板