路由的基础和使用

1. vue路由简介和基础使用

1.0 什么是路由

设备和ip的映射关系

接口和服务的映射关系

路径和组件的映射关系

1.1 为什么使用路由

在一个页面里, 切换业务场景

具体使用示例: 网易云音乐 music.163.com/

单页面应用(SPA): 所有功能在一个html页面上实现

前端路由作用: 实现业务场景切换

优点：

• 整体不刷新页面，用户体验更好

• 数据传递容易, 开发效率高

缺点：

• 开发成本高(需要学习专门知识)

• 首次加载会比较慢一点。不利于seo

1.2 vue-router介绍

如何在Vue项目中集成路由

官网: router.vuejs.org/zh/

vue-router模块包

它和 Vue.js 深度集成

可以定义 - 视图表(映射规则)

模块化的

提供2个内置全局组件

声明式导航自动激活的 CSS class 的链接

……

1.3 路由 - 组件分类

.vue文件分2类, 一个是页面组件, 一个是复用组件

.vue文件本质无区别, 方便大家学习和理解, 总结的一个经验

src/views(或pages) 文件夹 和 src/components文件夹

• 页面组件 - 页面展示 - 配合路由用
• 复用组件 - 展示数据/常用于复用

1.4 vue-router使用

App.vue - 页面标签和样式准备(==可复制继续写==)

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
.top {
  padding-top: 62px;
}
</style>

vue-router文档

• 安装

yarn add vue-router

• 导入路由

import VueRouter from 'vue-router'

• 使用路由插件

// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)

• 创建路由规则数组

const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]

• 创建路由对象 - 传入规则

const router = new VueRouter({
  routes
})

• 关联到vue实例

new Vue({
  router
})

• components换成router-view

<router-view></router-view>

总结: 下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

总结2: 一切都围绕着hash值变化为准

2. vue路由 - 声明式导航

2.0 声明式导航 - 基础使用

可用全局组件router-link来替代a标签

1. vue-router提供了一个全局组件 router-link
2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3. router-link提供了声明式导航高亮的功能(自带类名)

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 省略了 其他样式 */
.footer_wrap .router-link-active{
  color: white;
  background: black;
}
</style>