单页应用程序:例 网易云
多页应用程序：例 京东
- 网易云导航栏点击任一网页不会跳转
- 京东导航栏点击任一包括导航区域就会实现网页跳转
路由介绍
VueRouter Vue路由介绍
5个步骤写完之后出现 #/，说明当前Vue实例已经被路由所管理
2个关键步骤
新建views文件夹，存放 跟路由相关的页面性质组件
新建三个组件Friend,Find,My
一.配置路由规则（在路由对象中配置，每个规则是一个对象）
- 每条规则对应每个组件的地址栏路径，以及组件名字
- 引入每个组件
//main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// // 全局注册指令
// // 第一个参数是指令名，第二个参数是指令的配置项（在配置项里可以写指令相关的钩子，相关的生命周期函数）
// Vue.directive('focus', {
// // inserted会在指令所在元素被插入到页面时触发
// inserted(el) {
// // el就是指令所绑定的元素
// el.focus()
// }
// })
// 路由的使用步骤 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 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 },
]
})
new Vue({
render: h => h(App),
// router:router //将路由对象注入到Vue实例中(冒号后是路由对象，简写的话键值要一样)
router
}).$mount('#app')
补充：组件名字仅仅是一个单词会报错，在 export default {}导出中将组件名字写为多个单词组合
二.准备导航链接，配置路由出口(匹配的组件所展示的位置)
<!-- App.vue -->
<template>
<div>
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<!-- 路由出口 -> 匹配的组件所展示的位置 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
组件存放目录问题（为何路由相关组件要放在views目录呢 - 组件分类）
组件分类（更加容易维护）
- 页面组件（views目录）
- 复用组件（components目录）
