2. $router 整个项目中只有一个$router 所有路由组件里面的$router都相等也就是同一个$router 的缔造者的原型身上有push replace $router.proto 指向其构造函数的原型 以及在原型上还有一些路由守卫的信息

3. 多级路由里面写路径时不写‘/’ 在组件里面写路径时需要写全路径。在路由配置时可以给路由取名name:‘’

路由传参：

1. query参数，不用修改路由配置信息：

   字符串写法：传：?id=001&name=亮 收：$route.query.id /$route.query.name

   对象写法：传：{path：‘’‘’‘’‘’‘’‘’ ，query：{‘’‘’‘’‘’‘’‘’}} 也可以把path 换成name 路由名

2. params参数：需要在路由配置里面声明接收 path：/school/:name/:age ? :name占位符 ?表示可传可不传

   字符串写法：传：/name/age 收：$route.params.name /$route.params.age

   对象写法：传{name：student ，params：{‘’‘’‘’‘’‘’‘’}} 对象写法必须使用name 不能使用path

props配置：

当大量数据传入时依然使用$route.params/query 接收参数显然会有很多重复代码

这时就需要使用props传递参数，同时使用props接收（props传props收）

{
    name:'xiangqing',
    path:'detail/:id',
    component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
​
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
​
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    props($route){
        return {
            id:$route.query.id,
            title:$route.query.title
        }
    }
}
​
props:['id','title']

<router-link>的replace属性 默认是push push可以后退 replace直接销毁上一个路径 无法回退

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace .......>News</router-link>

编程式路由导航

1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   //$router的两个API
   this.$router.push({
       name:'xiangqing',
           params:{
               id:xxx,
               title:xxx
           }
   })
   ​
   this.$router.replace({
       name:'xiangqing',
           params:{
               id:xxx,
               title:xxx
           }
   })
   this.$router.forward() //前进一步
   this.$router.back() //后退一步
   this.$router.go() //可前进也可后退  正数代表前进几步   负数代表后退几步
   

缓存路由组件

路由组件在切换走的时候该组件会被销毁，如果不想让它被销毁就在其展示区里添加标签

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体编码：include表示想缓存哪个组件 如果不写就表示都缓存 缓存多个可以写成数组 加：

   <keep-alive include="News"> 
       <router-view></router-view>
   </keep-alive>
   

两个新的生命周期钩子 （生命周期钩子就是在特定的时候vue帮我们调用执行里面的函数）

还有一个$nextTick() 总共11个生命周期钩子

引用出来的场景：想让组件缓存，但是又想在切换页面的时候关闭定时器。

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2. 具体名字：

   0. activated路由组件被激活时触发。意思就是切换来
   1. deactivated路由组件失活时触发。意思就是切换离开

路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
       console.log('beforeEach',to,from)   //to,from就是切换去和来的路由的信息$route
       if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制  
           //$route里面有meta：{}路由元信息  程序员用来在路由组件里面写一些数据的地方
           if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
               next() //放行
           }else{
               alert('暂无权限查看')
               // next({name:'guanyu'})
           }
       }else{
           next() //放行
       }
   })
   ​
   //全局后置守卫：初始化时执行、每次路由切换后执行
   router.afterEach((to,from)=>{
       console.log('afterEach',to,from)
       if(to.meta.title){ 
           document.title = to.meta.title //修改网页的title
       }else{
           document.title = 'vue_test'
       }
   })
   

4. 独享守卫:

   beforeEnter(to,from,next){
       console.log('beforeEnter',to,from)
       if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
           if(localStorage.getItem('school') === 'atguigu'){
               next()
           }else{
               alert('暂无权限查看')
               // next({name:'guanyu'})
           }
       }else{
           next()
       }
   }
   

5. 组件内守卫：

   //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }
   

路由器的两种工作模式：hash模式、history模式

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观 。
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3. 兼容性较好。

4. history模式：

   1. 地址干净，美观 。
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时将其路径里面全部传递给服务器，这样会导致服务器找不到正确路径，需要后端人员支持，解决刷新页面服务端404的问题。

5. 路由器默认情况下是hash模式 如果想改模式就在创建router的时候 添加一个mode:'history'