Vue 路由

1.路由-是什么

目标

了解什么是路由

了解

设备和ip的映射关系、接口和服务的映射关系、路径和组件的映射关系

小结

1. 路由是什么呢?

   路由是一种映射关系

2. Vue中的路由是什么?

   路径和组件的映射关系

2.路由-为何用

目标

了解为何要学习和使用路由

了解

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

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

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

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

优点：

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

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

缺点：

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

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

小结

1. 什么是单页面应用?

   所有的业务都在一个页面编写, 只有一个html

2. 单页面应用好处?

   开发效率高, 用户体验好

3. 单页面如何切换场景?

   依赖路由切换显示

3.路由-vue-router介绍

官网: https://router.vuejs.org/zh/

vue-router模块包

4.Vue路由-组件分类

目标

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

讲解

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

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

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

总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据

5.Vue路由-vue-router使用

目标

学会vue官方提供的vue-router路由系统功能模块使用

了解

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值变化为准

6.Vue路由-声明式导航-跳转

目标

可用全局组件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>

总结: 链接导航, 用router-link配合to, 实现点击切换路由

7.Vue路由-声明式导航-传参

目标

在跳转路由时, 可以给路由对应的组件内传值

讲解

在router-link上的to属性传值, 语法格式如下

• /path?参数名=值

• /path/值 – 需要路由对象提前配置 path: “/path/参数名”

对应页面组件接收传递过来的值

• $route.query.参数名

• $route.params.参数名

总结:

?key=value 用$route.query.key 取值

/值 提前在路由规则/path/:key 用$route.params.key 取值

8.Vue路由-重定向

目标

匹配path后, 强制切换到目标path上

讲解

• 网页打开url默认hash值是/路径
• redirect是设置要重定向到哪个路由路径

例如: 网页默认打开, 匹配路由"/", 强制切换到"/find"上

const routes = [  {    path: "/", // 默认hash值路径    redirect: "/find" // 重定向到/find    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则  }]

总结: 强制重定向后, 还会重新来数组里匹配一次规则

9.Vue路由-404页面

目标

目标: 如果路由hash值, 没有和数组里规则匹配

讲解

默认给一个404页面

语法: 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面

1. 创建NotFound页面

   <template>  <img src="../assets/404.png" alt=""></template><script>export default {}</script><style scoped>    img{        width: 100%;    }</style>
   

2. 在main.js - 修改路由配置

   import NotFound from '@/views/NotFound'const routes = [  // ...省略了其他配置  // 404在最后(规则是从前往后逐个比较path)  {    path: "*",    component: NotFound  }]
   

总结: 如果路由未命中任何规则, 给出一个兜底的404页面

10.Vue路由-模式设置

目标

修改路由在地址栏的模式

讲解

hash路由例如: http://localhost:8080/#/home

history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

模式文档

router/index.js

const router = new VueRouter({  routes,  mode: "history" // 打包上线后需要后台支持, 模式是hash})