vue3.0引入子路由如何掛載-前端問答-PHP中文網

vue3.0引入子路由如何掛載

WBOY

發布： 2023-05-23 20:55:06

原創

576 人瀏覽過

Vue3.0是Vue.js框架的最新版本，它帶來了許多新功能和更好的效能。其中一個最大的變化之一就是關於路由的改進。在Vue3.0中，我們可以很容易地定義子路由，讓我們來看看如何掛載。

首先，我們需要建立一個Vue3.0的應用程式並安裝Vue Router4.0。安裝指令如下：

npm install vue-router@4.0.0-beta.7

登入後複製

我們需要在根元件中建立一個路由器，並將其掛載到Vue實例上。以下是一些簡單的範例程式碼：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/user',
    component: () => import(/* webpackChunkName: "user" */ './components/User.vue'),
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "user-profile" */ './components/UserProfile.vue')
      },
      {
        path: 'posts',
        component: () => import(/* webpackChunkName: "user-posts" */ './components/UserPosts.vue')
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = createApp(App);

app.use(router);

app.mount('#app');

登入後複製

這裡我們建立了一個包含三個路由的應用程式：一個主頁（Home）、一個關於頁面（About）和一個使用者頁面（User）。

注意到了嗎？我們在使用者頁面的路由配置中新增了一個子路由，子路由可以像這樣加入到父路由的children。在這個例子中，我們加入了兩個子路由：'' 和 'posts'。

我們現在需要在使用者頁面的元件模板中新增子路由插槽。以下是一個簡單的範例，展示如何為子路由新增插槽：

登入後複製

注意到了嗎？我們的插槽名稱是空的。這就是Vue Router4.0提供的新特性，它會自動為我們匹配子路由並將它們插入相應的插槽中。

最後，我們需要在子路由的元件模板中新增自己的插槽。以下是一個簡單的範例：

登入後複製

這個範例中的元件UserProfile.vue就是我們加入到使用者頁麵子路由中的元件。

現在，我們已經成功地將子路由掛載到我們的Vue應用程式中了。這個功能可以讓我們在一個元件中加入多個子路由，使我們的應用程式更加靈活和強大。

以上是vue3.0引入子路由如何掛載的詳細內容。更多資訊請關注PHP中文網其他相關文章！