vue-router相关概念

---

前言

$我们都知道，风雨之后，才能见彩虹。$
$但我们都希望能直接坐在彩虹里，他人已经为你布置好绚丽的世界。$
$其曲弥高，其和弥寡。感谢一路走来前辈们的探索经验.缅怀感激,为后来者踩坑.$
$成功不必在我,而功力必不唐捐；不忘初心，继往开来。$

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是路由？

说起路由你想起了什么?
路由是一个计算机网络里面的术语。
路由( routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --维基百科

额啥玩意?没听懂
在生活中,我们有没有听说过路由的概念呢?当然了,路由器嘛.
路由器是做什么的?你有想过吗?
路由器提供了两种机制:路由和转送.
路由是决定数据包从来源到目的地的路径.
转送将输入端的数据转移到合适的输出端.
路由中有一个非常重要的概念叫路由表.
路由表本质上就是一个映射表,决定了数据包的指向.

路由介绍详情

前后端分离阶段:
随着Ajax的出现,有了前后端分离的开发模式.
后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中.
这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上.
并且当移动端(iOS/Android)出现后,后端不需要进行任何处理，依然使用之前的一套API即可.
目前很多的网站依然采用这种模式开发.
单页面富应用阶段:
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
也就是前端来维护一套路由规则.
前端路由的核心是什么呢?
改变URL ,但是页面不进行整体的刷新。
如何实现呢?

1. url的hash和HTML5的history

1.1$使用hash会改变URL但不刷新页面$

1.2$html5的pushState（类似栈结构,可以回滚）$

1.3$html5replaceState（替换，不可回滚）$

二、什么是Vue-router?

vue- router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习：传送门

vue-router是基于路由和组件的
路由用于设定访问路径,将路径和组件映射起来.
在vue-router的单页面应用中,页面的路径的改变就是组件的切换.

2.1$Vue-router基本使用$

2.2$router基本配置（hash模式）$

router–>index.js

import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
const routes = [
	{
		path: '',
		component: ''
	}
	{
		path: '',
		component: ''
	}
]
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes
})
//3.讲router对象传入到Vue实例
export default router

2.3 $router相关属性$

>: to: 用于指定跳转的路径. > tag: tag可以指定之后渲染成什么组件,比如.上面的代码会被渲染成一 个

• 元素,而不是 >.router-link-active: 活跃选中 >replace: 不可回滚 router-view > 决定渲染的东西出现在什么位置 

• 2.4$redirect重定向(配置默认路径)$

  const routes = [
  	{
  		path:''
  		redirect:''
  	}
  ]
  

  2.5$HTML5的History模式$

  

  2.6$Vue-router动态路由$

  

  获取url用户属性$route.param.xxx
  

  2.7$路由的懒加载$

  官方给出了解释:
  当打包构建应用时，Javascript包会变得非常大，影响页面加载。
  如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了 官方在说什么呢?
  首先,我们知道路由中通常会定义很多不同的页面.
  这个页面最后被打包在哪里呢?
  —般情况下,是放在一个js文件中.
  但是,页面这么多放在一个js文件中,必然会造成这个页面非常的大.
  如果我们一次性从服务器请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上还出现了短暂空白的情况.
  如何避免这种情况呢?使用路由懒加载就可以了.路由懒加载做了什么?
  路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
  只有在这个路由被访问到的时候,才加载对应的组件

  箭头函数

  

  懒加载方式
  
  建议用第三种

  三. vue-router嵌套路由

  3.1$认识嵌套路由$

  
  如图home存在两个子组件.这两个子组件应该属于home里

  3.2 $vue-router传递消息$

  传递参数主要有两种类型: params和query
  params的类型: 配置路由格式: /router/:id
  传递的方式:在path后面跟上对应的值
  传递后形成的路径: /router/123,/router/abc
  query的类型:
  配置路由格式: /router,t也就是普通配置
  传递的方式:对象中使用query的key作为传递方式传递后形成的路径:
  /router?id=123,/router?id=abc

  传送门
  query传递大量数据使用.

  ---

  3.3 $router 与 $route辨析

  

  即:
  $router是导入的路由
  $route获取活跃状态的路由

  四.vue-router全局导航守卫

  4.1导航守卫

  

  目的:对跳转过程进行监听.比如动态修改我们的标题栏
  关键代码

  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
  })
  //前置守卫(Guard)
  router.beforeEach((to,from,next) => {
  //从from跳转到to
    document.title = to.matched[0].meta.title
    next()
  })
  
  export default router
  

  

  4.2导航守卫补充

  补充─:如果是后置钩子,也就是afterEach,不需要主动调用next()函数.

  //后置钩子
  router.afterEach((to,from) => {
  	
  })
  

  补充二:上面我们使用的导航守卫,被称之为全局守卫.
  路由独享的守卫.
  组件内的守卫.更多

  4.3keep-alive

  keep-alive 是 Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
  router-view也是一个组件，如果直搂被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存︰
  重要!了解更更多