路由封装，连接导航router-link

路由的封装抽离：

所有路由配置堆在main.js中不合适，需将路由模块抽离出来，以便维护

将与路由相关信息提取到src文件夹下的router文件夹下的index.js文件中

在main.js中就只需要导入当前路由，并且注入到当前实例中，其他与路由相关信息全剪切到index.js中

// index.js

// 路由的使用步骤 5+2
//  1.下载 v3.6.5
// 2.引入
// 3.安装注册Vue.use(Vue插件)
// 4.创建路由对象
// 5.注入到new Vue中，建立关联

// 2个核心步骤
// 1.建组件(views目录)，配规则
// 2.准备导航链接，配置路由出口(匹配的组件所展示的位置)

import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '../views/Friend.vue'

import Vue from 'vue' //原本在main.js中已经导入了vue，所以VueRouter初始化用到vue不报错，但是这里没有导入vue，插件初始化又用到了，所以需要先导入
import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化
const router = new VueRouter({  //创建路由对象
  //routes 配置路由规则
  //route 一条路由规则就是一个对象 {path:路径，component:组件}
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },

  ]
})
export default router //因为路由对象要在main.js中使用，所以需要导出，导出路由对象

1. 首先因为将原本的信息从main.js中调到了router文件夹下的index.js中，所以组件相对路径不再是 ./ 而变成了 ../  。这样看要考虑组件相对路径比较麻烦，直接使用@，指向的是src目录
2. 在进行VueRouter插件初始化时使用到了Vue，在main.js中已经导入了Vue,所以能直接使用Vue.use(VueRouter)，而到了index.js中需要重新导入。imort Vue from 'vue'
3. 创建的路由对象需要在main.js中进行导入，所以在index.js中需要进行export default router导出，然后在main.js中 import router from './router/index.js'
4. 补充： . /是从当前文件的同级进行查找其他文件， . . /是从当前文件上一级进行查找其他文件

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

Vue.config.productionTip = false

// // 全局注册指令
// // 第一个参数是指令名，第二个参数是指令的配置项（在配置项里可以写指令相关的钩子，相关的生命周期函数）
// Vue.directive('focus', {
//   // inserted会在指令所在元素被插入到页面时触发
//   inserted(el) {
//     // el就是指令所绑定的元素
//     el.focus()


//   }
// })



import router from './router/index.js'
new Vue({
  render: h => h(App),
  // router:router //将路由对象注入到Vue实例中(冒号后是路由对象，简写的话键值要一样)
  router
}).$mount('#app')

声明式导航 - 导航链接

• 虽然代码中写的是router-link标签，但是实际渲染的时候是a标签。
•  点击“我的音乐”链接的时候，页面渲染自动出现两个类
• 点击到哪个链接，哪个链接就会加上这两个类
• 为类添加背景色，点击哪个链接，哪个链接就会高亮显示
• 

声明式导航router-link   -  两个类名的区别

• router-link-exact-active 精确匹配   to="/my"仅仅可以匹配 /my
• router-link-active模糊匹配（用的多）  to="/my" 可以匹配 /my  /my/a   /my/b  ...以my开头的即可