VueRouter路由

单页应用程序:例 网易云        

多页应用程序：例 京东 

• 网易云导航栏点击任一网页不会跳转
• 京东导航栏点击任一包括导航区域就会实现网页跳转

路由介绍

 

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目录）