怎么使用Vue和vue-router创建单页应用

本文小编为大家详细介绍“怎么使用Vue和vue-router创建单页应用”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用Vue和vue-router创建单页应用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

开始

很自然地使用 Vue 和 vue-router 创建单页应用，当添加 vue-router 到混合器中时，我们已经使用组件组合我们的应用，我们需要做的就是将组件跟路由映射，让路由知道如何渲染他们，这里有一个简单的例子：

router-link

注意，我们使用自定义组件router-link来创建链接，而不是使用常规的a标记。这允许Vue路由器改变URL而无需重新加载页面，处理URL生成以及它的编码。稍后我们将看到如何从这些特性中获益。

router-view

router-view将显示对应于url的组件。你可以把它放在任何地方，以适应您的布局。

html

首先我们现在 src/views 创建两个页面：

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创建单页应用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。