vue-router本笔记是看b站codewhy老师的视频做的笔记，大家可以一起学习，个人觉得他讲课很好，不光可以听到新

本笔记是看b站codewhy老师的视频做的笔记，大家可以一起学习，个人觉得他讲课很好，不光可以听到新知识，还可以复习旧知识，简直美滋滋。视频地址是

www.bilibili.com/video/av595…

认识路由

路由是网络工程里面的术语

前端路由

改变url，页面不刷新

在控制台写location.hash='aaa',就不会刷新页面
history.pushState({},'','home')
history.replaceState({},'','about') 和上边的区别：不能点击返回，没有历史记录。
history.go(-1) 和pushstate配合。向前向后。 history.back()等价于history.go(-1) history.forward等价于history.go(1)

安装vue-router

npm install vue-router --save 或者脚手架安装

使用方法

修改导航栏为history模式（没有#）

在router>index.js中加一个mode:'history'

想让app.vue渲染成其他的标签的话，（默认是a标签）

需要在router-link中搞一个tag="botton"

点击哪个按钮让哪个按钮变成红色？

原理：vue默认点击哪个按钮就会给他增加一个router-link-active的标签，我们只需要把这个标签的属性加一个color：red就可以了。

动态路由（p107）

怎么在地址栏拼接用户，例如：`/user:lisi`

在index.js中写上路由，注意要写/:
App.vue中写上想用的按钮，并用v-bind和下面的data绑定。
成功啦

怎么拿到地址栏的信息

在User.vue展示的时候，取到下面的计算属性中的值。用到this.$rpute.params.abc

`$router`和`$route`的区别

router是创建出来的大的路由对象 route是当前正在活跃的路由（就是点击用户的时候用户那条路由处于活跃）

路由懒加载（P108、P109）

打包 npm run build 默认是把代码打包成三个文件

当我们写的代码越来越多的时候，第一个文件就会越来越大，当展示的时候就会很慢。比如页面出现短暂空白。

什么叫懒加载

用到时再加载。

懒加载作用

将路由对应的组件打包成一个个的js代码块。只有在这个路由被访问的时候，才加载对应的组件。懒加载之后是这样的：

懒加载的写法：

AMD写法
es6写法
我们一般用es6写法因为前面太麻烦了哈哈哈哈只需要把我们之前写的改一下就行了。

嵌套路由（P110）

如果需要在honme中再加子组件/home/news，就需要用到嵌套路由。

使用步骤

创建对应的子组件
在路由映射中配置对应的子路由
在组件内部使用，router-view.标签

传递参数（P111、112）

params方式

配置路由格式;/router/:id
传递方式：在path后面跟上对应的值
传递后形成的路径是/router/123

query方式

配置路由格式; /router 就是普通配置
传递方式:对象中使用query的key作为传递方式。
传递后形成的路径是/router?id=123

当我们传递数据的时候不是用router-link的时候怎么办？

写监听事件
在method中写

    profileClick(){
        this.router.push({
            path:'/profile',
            query:'xiaolu',
            age:18
        })
    }

取数据

<div>
    name:{{$route.query.name}}
</div>

总结，params传递简单的，query传递复杂的。因为她可以传递对象

router vs route（p113）

router到哪儿都是一样的router route就是当前活跃的router

导航守卫（p114、115）

监听你从哪里跳转到哪里

需求：点击首页，浏览器端的标签页改为首页，点击内容，浏览器标签页改为内容。

方法一（生命周期法）：写生命周期函数created(){document.title = '用户'}

方法二（全局守卫）在路由中全局监听

keep-alive（p116）

默认情况是我们点击首页的时候home.vue创建，我们点击用户界面的时候，home.vue就会销毁。如果我们在app.vue中写上<keep-alive><router-view/></keep-alive>这样就不会在打开用户界面的时候销毁home

需求：当我们点击首页下的新闻，然后点到别的页面的时候，再点首页还会记录上次点击的页面，也就是还是显示新闻。

思路：1. 用activated函数this.$router.push(this.path获取路径。 2. 然后用导航守卫，

需求:其中有一个页面要反复创建。

在<keep-alive>中加上exclude="xxx" 也就是<keep-alice exclude="xxx",那么xxx就会被排除在外，当切换的时候xxx就会被销毁，点击xxx的时候会重新创建。

keep-alive遇见vue-router（p118）

TabBar（p119）

目标：

思路：1. 先给底下那一栏分成几个tabbariteam，然后每个iteam中分为两个slot，一个图片一个文字。

文件夹设计

新建views文件夹。在里边新建各种页面的文件夹，以后在这里写每个页面独特的东西。

给路径起别名

在import中可以直接用，但是在html标签中的话，就要在前面加上~

promise的介绍和基本使用

是异步编程解决方案优雅的解决回调地狱的问题

基本语法

<script>
      // // 使用sittimeout
      // sitTimeout(()=>{
      //   console.log('hello word');
      // },1000)
      // 参数  resove，reject
      //链式编程

      new Promise((resolve,reject) =>{
        sitTimeout(()=>{
        // console.log('hello word');
        resolve()
        },1000)
      }).then(() => {
        console.log('hello world');

        return new Promise((resolve,reject)=>{
          setTimeout(()=>{
            resolve()
          },1000)
        }).then(()=>{
          console.log('hello vue');
          
        })
        
      })
  </script>

.then是调用成功的时候运行的。 .catch是调用失败的时候运行的。

all方法使用

需求：传入两个请求，必须两个请求都满足的时候，才执行下之后的代码。

   Promise.all([
      new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('11111')
        },1000)
      }),
      new Promise((resolve,reject)=> {
        setTimeout(() => {
          resolve('2222')
        }
      )},5000)
    ]).then(results =>{
      console.log(results);
      
    })

vue-router