vue子路由怎麼配置

Vue是一款流行的JavaScript框架，用於建立可互動的網路應用程式。 Vue的路由功能可以讓我們建立單頁應用程式（SPA），不同的路由對應著不同的元件，然後在元件中渲染指定的內容。子路由是Vue路由中的一種特殊路由類型，可用於嵌套在其他路由之內。本文將介紹如何在Vue中設定子路由。

首先，我們需要確保已經安裝了Vue及其相關依賴，最好使用Vue CLI建立新專案。接下來，我們需要建立Vue元件並定義路由。

定義父路由
在父元件中定義路由（一般為根路由/），為子元件提供容器。

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

定義子路由
然後，在父元件中為子元件建立一個路由指向。

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在這個例子中，「/」是根路由，它指向了Home元件。我們為Home元件建立了一個子路由為“/about”，它指向了About元件。

在父元件範本中新增子元件容器
在Home元件的範本中，我們需要新增一個佔位符容器來呈現子元件。

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

這個「router-view」指令就是子元件容器，它將顯示透過子路由指定的元件。

在子元件範本中加入內容
在About元件的範本中，我們可以加入一些內容來展示它是什麼。

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page.</p>
  </div>
</template>

現在，我們已經成功地設定了一個Vue子路由。測試一下，看看能否正常顯示。

總結
設定Vue子路由有三個基本步驟。這些步驟包括：

定義父路由：在根路由聲明父元件，並且將其路由導航到這個元件。

定義子路由：在父組價中為子元件建立路由指向。

在父元件範本中新增子元件容器：將子元件插入佔位符元素。

在子元件範本中新增內容：為子元件提供內容以展示其功能。

最後提醒一下，當你在Vue中使用子路由時，必須保持路徑正確。路徑必須從父組件開始，以斜線（/）開頭。

以上是vue子路由怎麼配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！