vue-router 探索之旅：路由的安装与初始化

在当今的单页面应用程序（SPA）开发中，vue-router 已经成为不可或缺的利器。作为 Vue.js 官方的路由管理库，它可以轻松实现页面的跳转、状态管理和导航控制。想要使用 vue-router，首先需要完成安装和初始化。

1. 安装 vue-router

1.1 使用 npm 安装

npm install vue-router

1.2 使用 yarn 安装

yarn add vue-router

2. 初始化 vue-router

2.1 在 Vue.js 中安装 vue-router

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

Vue.use(VueRouter)

2.2 创建一个 VueRouter 实例

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

2.3 将路由实例注入到 Vue 实例

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

至此，vue-router 的安装和初始化已经完成。您可以开始使用 vue-router 来管理您的路由，实现页面的跳转、状态管理和导航控制。

3. 在 template 中使用 router-link 和 router-view

3.1 使用 router-link 实现路由跳转

<router-link to="/about">关于我们</router-link>

3.2 使用 router-view 展示路由跳转后的组件

<router-view></router-view>

通过以上步骤，您已经完成了 vue-router 的安装、初始化以及在 template 中的使用。现在，您就可以使用 vue-router 来构建您的 SPA 应用程序了。