在Vue项目中，Vue-router是非常重要的插件，它能够帮助我们实现页面的路由控制和管理。在本篇博客中，我将介绍如何安装Vue-router，并展示如何使用它。

安装Vue-router

首先，我们需要在Vue项目中安装Vue-router。打开终端，进入你的项目目录，并执行以下命令：

npm install vue-router

安装完成后，我们可以在项目中引入Vue-router：

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

Vue.use(VueRouter)

配置路由

接下来，我们需要配置路由。在项目根目录下创建一个新文件夹，命名为router，在该文件夹中新建一个index.js文件。然后，我们可以开始编写路由配置：

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

以上代码中，我们定义了三个路由，分别对应根路径、关于页面和联系页面。我们还使用了history模式来去除URL中的#符号。

使用路由

配置完成后，我们需要在Vue组件中使用路由。在你需要使用路由的组件中，可以像下面这样引入路由：

import router from '@/router'

然后，在Vue实例中注入路由：

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

现在，我们可以在组件的模板中使用路由了。例如，在导航栏中，我们可以使用<router-link>组件来实现导航链接：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

同时，我们还需要一个用于展示对应路由组件的地方。我们可以使用<router-view>组件来实现：

<router-view></router-view>

这样，当我们点击导航链接时，对应的路由组件就会以该位置替换。

总结

在本篇博客中，我们学习了如何安装和使用Vue-router。通过Vue-router的配置和使用，我们可以轻松实现Vue项目中的路由控制和管理。希望这篇博客能够帮助你更加深入理解Vue-router的安装和使用。如有任何问题或建议，欢迎留言讨论！

本文来自极简博客，作者：晨曦吻，转载请注明原文链接：Vue 安装 Vue-router 路由安装以及使用