11_17_第六阶段：大前端进阶||07-Vue详解||P19：路由模式与 404【显示当前登录的用户||路由模式与404||在钩子函数中使用异步请求】【观看狂神随笔】

路由模式与 404

【业务功能1】显示当前登录的用户

• 登录时将用户名传到Main页面
  *【通过登录表单，通过请求链接传了一个name】
  *【name走完就会进如Main页面】

1、修改Login.vue，当前用户的名字push回去

2、修改index.js，来接收name，要去取

3、Login.vue传过来一个参数，index.js接收到之后，修改前端Main.vue来取，取到后上面就可以用了

4.效果

路由模式与404

去掉这个#号

路由模式有两种

• hash：路径带 # 符号，如 http://localhost/#/login
• history：路径不带 # 符号，如 http://localhost/login

修改路由配置，代码如下：

export default new Router({
  //配置路由，当访问/login时候，就让他进Main这个组件
  mode: 'history',
  routes: [
  ]
});

404 demo

1.在views下创建一个NotFound.vue视图组件
NotFound.vue

<template>
    <div>
      <h1>404,你的页面走丢了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

2.修改路由配置index.js

3.效果图

路由钩子与异步请求【就和过滤器一样，可以在运行之前做一些事情】

​​beforeRouteEnter​​​：在进入路由前执行
​​​beforeRouteLeave​​：在离开路由前执行

在Profile.vue中写

beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }

参数说明：

to：路由将要跳转的路径信息

from：路径跳转前的路径信息

next：路由的控制参数

next() 跳入下一个页面

next(’/path’) 改变路由的跳转方向，使其跳到另一个路由

next(false) 返回原来的页面

next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

在钩子函数中使用异步请求

1、安装 Axios

• 都试试，知道下上

cnpm install axios
cnpm install asios -s
cnpm install --save vue-axios

2、main.js引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

3、准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下【创建mock】。

json数据

{
  "name": "zhixi的博客" 1,
  "isNonProfit": true,
  "address": {
    "street": "单台村",
    "city": "河南信阳",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

4.在 beforeRouteEnter 中进行异步请求
Profile.vue

export default {
    //第二种取值方式
    // props:['id'],
    name: "UserProfile",
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
      //加载数据
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }

5.路由钩子和axios结合图