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

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

创新互联公司成都网站建设定制网站设计，是成都网站建设公司,为成都塑料袋提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站维护热线：18982081108

开始

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

router-link

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

router-view

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

html

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

Home.vue：

About.vue：

在 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：

读到这里，这篇“怎么使用Vue和vue-router创建单页应用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。