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