Vue:404和路由钩子-狂神

前面我们实现的功能中，请求组件的时候它的url中总是有一个"#"符号，这显然和我们平时使用的习惯不符，所以我们需要解决这个问题；这个问题可以通过设置路由对象的路由模式解决

1.路由模式

vue的辅助类VueRouter的路由模式有两种

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

我们可以通过修改路由配置实现两种模式的切换，代码以下：

export default new Router({
  mode: 'history',
  routes: [
  ]
});

2.处理404

当用户请求路由文件中没有配置的路由规则的时候，我们应该将它转发/重定向到我们项目的404页面

创建一个404视图组件：NotFound.vue

<template>
  <h2>404,您请求的页面走丢了</h2>
</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>

</style>

配置路由规则

    {
      path: "*",
      component: NotFound
    }

3.路由钩子

钩子就是我们前面说的vue生命周期中的钩子函数，路由钩子就是在请求对应的路由的时候，可以在请求到这个子组件之前添加一些自定义操作，在离开这个路由到的组件的时候做一些操作

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

路由钩子的使用

路由钩子需要设置在我们需要设置设置它的子组件中，比如我们使用Profile.vue组件设置路由钩子

<template>
  <div>
    <h2>用户信息页</h2>
    {{id}}---{{name}}
  </div>
</template>

<script>
export default {
  props: ['id','name'],
  name: "profile",
  beforeRouteEnter: (to,from,next)=>{
    console.log("进入'我的信息页'之前"),
      next()
  },
  beforeRouteLeave: (to,from,next)=>{
    console.log("离开'我的信息页'之前")
    next()
  }
}
</script>

<style scoped>

</style>

参数说明

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
• next() 跳入下一个页面
• next(’/path’) 改变路由的跳转方向，使其跳到另外一个路由
• next(false) 返回原来的页面
• next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

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

我们应该将我们的异步请求和路由钩子合并起来使用，比如在加载用户信息页面的时候，我们将请求用户数据的异步请求放在beforeRouteEnter里去执行，这样用户在请求到页面的时候数据已经加载过来了，我们只需要将数据取出来渲染到视图组件上即可

安装
注：npm不行就cnpm

npm install --save axios vue-axios

• main.js引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

在static文件夹(只有static文件夹下的资源才能直接请求到)下创建一个用于测试的JSON格式数据，首先创建一个名为mock的文件夹，开发中一般都将自己的测试用的假数据放在这个文件夹中；在这个文件夹中创建一个json格式的文件data.json

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂伸说java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

在Profile.vue中新增使用axios进行异步通信的方法

  methods:{
    getData:function () {
      this.axios({
        method:"get",
        url:"http://localhost:8080/static/mock/data.json"
      }).then(response=>console.log(response))
    }
  }

在beforeRouteEnter中调用这个方法

  beforeRouteEnter: (to,from,next)=>{
    console.log("进入'我的信息页'之前"),
      next(vm => {
        vm.getData();
      });
  },

将获取的数据渲染到数据模板上

<template>
  <div>
    <h2>用户信息页</h2>
    {{id}}---{{name}}<br>
    {{info.name}}---{{info.url}}---{{info.address}}
  </div>
</template>

<script>
export default {
  props: ['id','name'],
  name: "profile",
  data(){
    return{
      info:{
        name: null,
        url: null,
        address: {
          street: null,
          city: null,
          country: null
        }
      }
    }
  },
  beforeRouteEnter: (to,from,next)=>{
    console.log("进入'我的信息页'之前"),
      next(vm => {
        vm.getData();
      });
  },
  beforeRouteLeave: (to,from,next)=>{
    console.log("离开'我的信息页'之前")
    next()
  },
  methods:{
    getData:function () {
      this.axios({
        method:"get",
        url:"http://localhost:8080/static/mock/data.json"
      }).then(response=>console.log(this.info = response.data))
    }
  }
}
</script>

<style scoped>

</style>

小结

• 路由模式：就是我们使用的VueRouter对象实例化的时候的一个对象属性mode，它默认值为hash，这导致我们的vue项目的路径中总有一个#符号；我们可以将mode显式的设置为history，这样url中就没有#符号了
• 处理404：就是将没有在我们配置的路由文件中的url请求全部转到我们自定义的404组件即可
• 路由钩子：就是通过路由在跳转到某一个组件之前我们可以通过路由钩子函数做一些事情，在离开这个通过路由跳转的组件的前一刻，我们也可以通过路由钩子函数做一些事情，这些事情都是我们根据自己的需求自定义的(这其实就和前面学习的vue对象的生命周期中使用的钩子函数是一个道理 | Vue(8) —— Axios异步通信.)
• 路由钩子的使用：就是在要跳转的那个组件中直接按照使用钩子函数的语法使用路由钩子即可
• 在钩子函数中使用异步请求：就是将axios的异步通信功能和路由钩子的功能进行融合，注意我们需要自己在这个组件中定义一个方法来实现axios异步通信，再在路由钩子中的next(vm => {vm.方法名称})来调用这个方法