怎么使用Vue和vue-router創(chuàng)建單頁應用

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

開始

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

router-link

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

router-view

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

html

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

Home.vue：

<template>

    <div class="home-wrap">

        home

    </div>

</template>

<script>

export default {

    name: 'Home',

    data: () => {

        return {

        }

    }

}

</script>

About.vue：

<template>

    <div class="about-wrap">

        about

    </div>

</template>

<script>

export default {

    name: 'About',

    data: () => {

        return {

        }

    }

}

</script>

在 src/router/index.js 添加對應的路由：

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

const routes = [

  {

    path: '/about',

    name: 'About',

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

    meta: {

      title: '關于'

    }

  },

  {

    path: '/home',

    name: 'Home',

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

    meta: {

      title: '首頁'

    }

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

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

<template>

  <router-link to="/home">Go to Home</router-link>

  <router-link to="/about">Go to About</router-link>

  <router-view/>

</template>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

#nav {

  padding: 30px;

}

#nav a {

  font-weight: bold;

  color: #2c3e50;

}

#nav a.router-link-exact-active {

  color: #42b983;

}

</style>

讀到這里，這篇“怎么使用Vue和vue-router創(chuàng)建單頁應用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業(yè)資訊頻道。