Vue 路由器链接示例演示 - 如何制作 Vue 路由器

介绍

本文将会介绍如何使用 Vue Router 来创建一个简单的路由器链接示例。Vue Router 是一个官方的 Vue.js 路由库，提供了在 Vue 应用程序中管理应用程序路由的能力。

步骤

步骤1：创建一个 Vue 应用程序

首先，我们需要创建一个基本的 Vue 应用程序。我们可以使用 Vue CLI 来快速生成一个 Vue 应用程序示例。如果您还没有安装它，请首先安装 Vue CLI 。

# 全局安装 Vue CLI
$ npm install -g @vue/cli

# 创建一个 Vue 应用程序
$ vue create my-vue-app

步骤2：安装 Vue Router

接下来，我们需要安装 Vue Router。在终端中键入以下命令即可安装最新版本的 Vue Router：

$ npm install vue-router

步骤3：创建路由配置文件

下一步，我们需要创建一个路由配置文件来定义我们的应用程序的所有路由。我们可以在项目根目录中创建一个 router.js 文件，并在其中引入 Vue 和 Vue Router：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/about.vue')
    }
  ]
})

在上面的代码中，我们使用 Vue Router 的 Router 类来创建了一个新的路由器。路由器被配置为具有两个路径：/ 和 /about。每个路径都有一个 name 属性和一个指向相应组件的 component 属性。

我们将路由器导出为默认模块，以便能够在其他地方进行引用。

步骤4：创建各个视图组件

现在，我们需要创建两个视图组件来渲染我们的两个路由，即主页和关于页。在项目中的 src/views 目录下创建一个名为 home.vue 的文件，以及一个名为 about.vue 的文件：

<!-- home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<!-- about.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

步骤5：在 App.vue 中使用路由器

最后，我们需要在 App.vue 中使用我们的路由器。我们需要在 App.vue 中添加一个 <router-view> 标签来渲染我们的路由组件，以及在 main.js 文件中引入 router.js：

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

步骤6：启动应用程序

现在，你可以启动应用程序并在浏览器中查看它。在命令行中输入以下命令以启动应用程序：

$ npm run serve

结论

现在，您已了解如何使用 Vue Router 创建一个简单的路由器链接示例。Vue Router 是一个非常强大的 Vue.js 应用程序路由器，它能够轻松管理应用程序的路由。