Vue Router的简单介绍及安装，配置步骤

一、介绍

引用Vue Router官方的话来说：

Vue router 是 Vue.js官方提供的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的链接

HTML5 历史模式或 hash 模式，在 IE9 中自动降级

自定义的滚动条行为

二、Vue Router的安装步骤

分为两种情况：

1. 项目初始搭建时：

vue-cli2及以上，可以选择安装vue-router模块，脚手架会帮助我们安装并初始配置好路由基本功能，如下图：

vue-cli2的安装方式：

在这里插入图片描述

vue-cli3及以上的安装方式：

在这里插入图片描述

2. 项目中没有路由功能时：

① 首先通过 npm install vue-router --save 命令安装vue-router模块

npm install vue-router --save

② 在src目录下新建router文件夹，router文件夹下新建index.js文件，目录结构如下：
在这里插入图片描述
③ 在index.js文件中导入 vue 和 vue-router 模块，如下：

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

④ 使用 Vue.use(VueRouter) 安装插件

Vue.use(VueRouter)

⑤ 创建 VueRouter 实例，在实例中我们就可以配置相关的路由规则，最后使用 export default router 导出，以便在main.js文件中导入配置好的路由功能并使用；index.js文件中具体代码如下：

// 导入 vue 和 vue-router 模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入首页模块，以便在项目第一次启动时显示内容，后期可根据自己需求修改或者删除
import Home from '../views/Home.vue'

// 使用Vue.use(VueRouter)来安装插件；
Vue.use(VueRouter)

// 配置相关路有规则，这里把它抽离了出来
const routes = [
  {
    
    
    // 页面首次加载时，路由重定向
    path: '',
    redirect: '/home'
  },
  {
    
    
    // 主页路由规则
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {
    
    
        path: '',
        redirect: 'findmusic'
      },
      {
    
    
        path: 'findmusic',
        // 使用路由懒加载方式
        component: () => import("@/views/findmusic/findmusic"),
        children: [
          {
    
    
            path: '',
            redirect: 'recommend'
          },
          {
    
    
            path: 'recommend',
            component: () => import("@/views/findmusicpages/recommend")
          }
        ]
      },
      {
    
    
        path: 'friend',
        component: () => import("@/views/friend/friend")
      }
    ]
  }
]

// 创建VueRouter对象
const router = new VueRouter({
    
    
  routes,
  // 为处于活跃状态下的路由添加样式
  linkActiveClass: 'active-class',
  // 用来设置路由的解析模式，是hash还是history
  mode: 'hash' 
})

export default router

⑥ 在 main.js文件中导入

import router from './router'

//记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
    
    
  router,
  render: h => h(App)
}).$mount('#app')