如何安装 vue 路由器 - Shell-Bash

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。在本文中，我们将会介绍如何在Vue.js项目中安装Vue Router，以及一些基本的使用方法。

安装 Vue Router

安装Vue Router的命令如下：

npm install vue-router

其中，我们使用npm作为包管理器，安装vue-router。

引入 Vue Router

在项目中我们需要在 main.js 文件中引入 Vue Router。

import VueRouter from 'vue-router';
import Vue from 'vue';
Vue.use(VueRouter);

创建 Vue Router 实例

在项目中，我们需要创建一个vue router实例，并设置路由映射。在这个例子中，我们创建了一个全局路由，并设置了映射：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      // 懒加载方式加载组件
      component: () => import('@/views/Home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      // 懒加载方式加载组件
      component: () => import('@/views/About.vue'),
    },
  ],
});

在这个例子中，我们创建了两个路由，分别对应了项目的首页和关于页面。

在Vue中使用Vue Router

在你的Vue组件中使用Vue Router非常简单。你可以使用<router-link>和<router-view>两个组件来映射页面。

<template>
  <div>
    <div>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

在这个例子中，<router-link>将会渲染成一个可以点击的链接，链接指向的目标是我们在创建Vue Router实例中设置的路由。

<router-view>将会显示我们当前路由匹配到的组件。

结语

通过以上步骤，我们成功的安装了Vue Router，并在Vue组件中使用它。希望本文对于初学者有帮助。