单页应用程序:例 网易云
多页应用程序：例 京东
- 网易云导航栏点击任一网页不会跳转
- 京东导航栏点击任一包括导航区域就会实现网页跳转
路由介绍
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目录）
)
)
