## 路由及工作原理

• 后端路由:url地址和后端逻辑的对应关系

• 前端路由:url地址和组件的对应关系

• 前端的路由：不同路径加载不同页面 页面不会跳转 （功能类似于tab切换）

• 2..路由的工作原理 ： 监听网页hash值变化

• (1)修改网页的hash值

  • hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转

• (2)给window注册onhashchange事件，监听hash值变化

  • 当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面

单页面应用 （spa）

重点来了！

## vue路由使用流程

给vue添加路由有三种方式

以下两种实际开发推荐（自动配置一条龙服务）

（1）vueui 创建脚手架的勾选 vue-router选项

（2）在根目录执行: vue add router

这个命令可以让你原本没有配置路由的项目，一键配置。与vueui作用一致

以下方式实际开发不推荐，但是学习vue路由必须要掌握的（工作中可以不写，但是不能不知道）

vue路由官方文档：router.vuejs.org/zh/

• vue本身不提供路由功能，而是由vue团队提供的Vue Router插件完成，因此Vue Router也称之为vue全家桶中的一员 最简单的一键生成路由的方式：使用vue ui创建项目的时候，只需要勾选Router选项即可

• 什么导包,什么配值,全部给你一条龙搞定！

观察一下路由流程

0. App.vue和界面的对应关系

url和组件的对应关系

0. 不同于功能类的组件,路由管理的组件一般放在/views目录

   1.1 /views目录：放组件的地方，这里的组件一般对应页面级别(整个页面)

   1.2 /components目：也是放组件的地方，这里的组件一般对应需要复用的页面局部内容

1. 路由管理的组件都是页面级别

   0. 一般路由管理跳转的组件都是页面级别，放入views文件夹中

2. 属性:

   0. path:地址
   1. component:组件
   2. name:类似于组件的name属性,可以省略

导入的2种方式

1.传统导入 不管这个组件你用不用都会加载 2.懒加载 访问的时候才会加载不访问不加载 提示：多用传统导入，少用懒加载 路由如何整合到Vue上呢?

在index.js 创建 （先导入后创建） //创建路由规则 const routes = [ //路由重定向 只要路径是/ 就会改成/find { path: "/", redirect: "/find" }, { path: "/login", component: login, } 常见完成后要配置VueRouter实例 注意：一定要暴露 export default router 暴露的router由main.js 的 import router from './router'接收 并和Vue关联 const router = new VueRouter({ mode: "hash", routes }) 在App.vue 链接xxx (1.点击多出来的标签 2.url改变 3.内容改变 ) router-link to="/xxx" 链接的是要跳转的目标文件页面

超级重点

routes:数组 路由匹配规则 router:路由对像 负责管理路由规则 $route: 负责接收路由参数$router：负责跳转路由