本文小編為大家詳細(xì)介紹“怎么使用Vue和vue-router創(chuàng)建單頁(yè)應(yīng)用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么使用Vue和vue-router創(chuàng)建單頁(yè)應(yīng)用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司成都網(wǎng)站建設(shè)定制網(wǎng)站設(shè)計(jì)，是成都網(wǎng)站建設(shè)公司,為成都塑料袋提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開發(fā)等。成都網(wǎng)站維護(hù)熱線：18982081108

開始

很自然地使用 Vue 和 vue-router 創(chuàng)建單頁(yè)應(yīng)用，當(dāng)添加 vue-router 到混合器中時(shí)，我們已經(jīng)使用組件組合我們的應(yīng)用，我們需要做的就是將組件跟路由映射，讓路由知道如何渲染他們，這里有一個(gè)簡(jiǎn)單的例子：

router-link

注意，我們使用自定義組件router-link來創(chuàng)建鏈接，而不是使用常規(guī)的a標(biāo)記。這允許Vue路由器改變URL而無需重新加載頁(yè)面，處理URL生成以及它的編碼。稍后我們將看到如何從這些特性中獲益。

router-view

router-view將顯示對(duì)應(yīng)于url的組件。你可以把它放在任何地方，以適應(yīng)您的布局。

html

首先我們現(xiàn)在 src/views 創(chuàng)建兩個(gè)頁(yè)面：

Home.vue：

About.vue：

在 src/router/index.js 添加對(duì)應(yīng)的路由：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [

  {

    path: '/about',

    name: 'About',

    component: () => import('../views/About.vue'),

    meta: {

      title: '關(guān)于'

    }

  },

  {

    path: '/home',

    name: 'Home',

    component: () => import('../views/Home.vue'),

    meta: {

      title: '首頁(yè)'

    }

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

在 src/App.vue 添加 router-link，router-view：

讀到這里，這篇“怎么使用Vue和vue-router創(chuàng)建單頁(yè)應(yīng)用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。