Vue-Router+Route-Link+Router-View实现页面切换

在本文中，您将学习到：

• 什么是Vue-Router以及它的作用
• 如何安装和初始化Vue-Router
• 如何使用Route-Link来创建页面链接
• 如何使用Router-View来显示页面内容
• 如何配置Vue-Router的路由规则

在开始之前，确保您已经安装了Vue.js和Vue-Router。您可以通过以下命令安装这两个库：

npm install vue vue-router

Vue-Router是什么？

Vue-Router是一个用于构建单页应用（SPA）的前端路由库。它允许您在应用程序中创建不同的路由，并通过这些路由来切换不同的页面。Vue-Router与Vue.js紧密集成，因此您可以轻松地将其添加到您的Vue.js项目中。

如何安装和初始化Vue-Router？

要安装Vue-Router，您可以通过以下命令将其添加到您的项目中：

npm install vue-router

安装完成后，您需要在您的Vue.js应用程序中初始化Vue-Router。您可以通过在main.js文件中添加以下代码来完成此操作：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

new Vue({
  router
}).$mount('#app')

在上面的代码中，我们首先导入了Vue和Vue-Router。然后，我们调用了Vue.use()方法来注册Vue-Router。接下来，我们创建了一个VueRouter实例，并在其中定义了两个路由。第一个路由指向根路径“/”，并映射到Home组件。第二个路由指向路径“/about”，并映射到About组件。最后，我们创建了一个新的Vue实例，并将其挂载到ID为“app”的元素上。

如何使用Route-Link来创建页面链接？

要使用Route-Link来创建页面链接，您需要在您的HTML文件中使用<router-link>标签。<router-link>标签是一个特殊的HTML元素，它允许您创建指向其他路由的链接。例如，以下代码创建了一个指向“/about”路由的链接：

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

当用户点击这个链接时，Vue-Router将加载“/about”路由并显示About组件。

如何使用Router-View来显示页面内容？

要使用Router-View来显示页面内容，您需要在您的HTML文件中使用<router-view>标签。<router-view>标签是一个特殊的HTML元素，它用于显示当前路由的组件。例如，以下代码将显示当前路由的组件：

<router-view></router-view>

如何配置Vue-Router的路由规则？

您可以通过在Vue-Router实例中定义routes选项来配置Vue-Router的路由规则。routes选项是一个数组，其中包含每个路由的配置对象。每个路由的配置对象可以包含以下属性：

• path：路由的路径
• component：路由映射到的组件
• name：路由的名称
• alias：路由的别名
• props：传递给路由组件的属性
• children：子路由

例如，以下代码定义了一个配置了三个路由的Vue-Router实例：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact,
      name: 'contact'
    }
  ]
})

在上面的代码中，我们定义了三个路由。第一个路由指向根路径“/”，并映射到Home组件。第二个路由指向路径“/about”，并映射到About组件。第三个路由指向路径“/contact”，并映射到Contact组件。我们还为第三个路由指定了一个名称“contact”。

结论

在本文中，我们介绍了如何使用Vue-Router、Route-Link和Router-View来实现Vue.js单页应用的页面切换。我们从Vue-Router的安装和初始化开始，然后创建了一个简单的单页应用，并使用Vue-Router来管理页面的路由和切换。最后，我们介绍了如何配置Vue-Router的路由规则。