第六天 路由

一、路由

路由的步骤
1.引入路由
2.路由的配置项 每个路由的规则都是一个对象，此对象必须有两个值
routes: 配置对象中的router，配置路由规则
path：表示监听路由的地址
component: 表示路由跳转对应的组件
redirect：重定项 重定项路径
3.将路由规则挂载到实例上
真实路径，路径不包含#，这样路由就是地址的一部分，刷新页面会带着路由重新加载
mode:"history" 地址会被覆盖
mode:"hash" 默认值，根路径后+ #
url上有#，不会被包含在http请求中，对后端没有影响，因此改变hash后页面不刷新
4.操作代码：

马跃磊
马士洋
曹帅

二、路由传参

  路由传参共有两种方式 query 以及 params

1.query

      直接在router-link to=""属性中以例如?id=2的形式拼接，参数直接进入query

2.parmas

     在path里面拼接，以、:/key/:id的形式来进行拼接 参数直接进入到params中

3.router 跳转路由

    route  路由参数
    routes 配置路由规则

4.实例操作

   

    
        
        马跃磊
        马士洋
        曹帅

        点击
        
        
  
  

  

三、路由嵌套

实例操作：

    

    
        马跃磊
        马士洋
        曹帅
    
        

    
    
  

  

四、路由守卫

1. 路由钩子包括：生命周期、动画、keep-alive、路由

2、路由守卫分为：全局守卫 组件守卫 独享守卫

3、从一个组件跳转到另外一个守卫

         1、先从前一个组件出来  beforeRouteLeave
  2、到全局下   beforeEach
  3、根据路由跳转(路由独享)   beforeEnter
  4、进入下个组件   beforeRouteEnter
  5、所有事情全部结束  afterEach

4、

      全局   beforeEach   afterEach
      组件   beforeRouteEnter   beforeRouteLeave
      路由独享  beforeEnter    beforeLeave

5、操作代码

    
      马跃磊
      马士洋
      曹帅