Vue--自定义404页面 & 路由钩子&路由钩子与异步请求

Posted Z && Y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue--自定义404页面 & 路由钩子&路由钩子与异步请求相关的知识,希望对你有一定的参考价值。

1. Vue--404和路由钩子

项目结构


路由模式有两种

  • hash:路径带 # 符号,如 http://localhost/#/login
    在这里插入图片描述
  • history:路径不带 # 符号,如 http://localhost/login
    在这里插入图片描述

1.1 使用hash路由模式(推荐)

修改路由配置,代码如下:

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

1.2 自定义置404页面


1.2.1 创建一个NotFound.vue视图组件

在这里插入图片描述

NotFound.vue

<template>
  <div>
    <img src="../../static/img/404.jpg" alt="">
  </div>
</template>

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

<style scoped>
</style>

1.2.2 配置路由

在这里插入图片描述

import NotFound from '../components/NotFound'
{
   path: '*',
   component: NotFound
}

1.2.3 运行结果

在这里插入图片描述


1.3 路由钩子与异步请求

2个常用的与路由相关的钩子函数

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

1.3.1 路由钩子

Profile.vue

  export default {
    props: ['id'],
    name: "userProfile",
    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.3.2 异步请求

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

1.3.2.1 安装 Axios

当前项目目录打开命令行输入:

npm install --save axios vue-axios

1.3.2.2 main.js引用 Axios

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

1.3.2.3 准备数据

只有我们的 static 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下。
在这里插入图片描述

{
  "name": "码云",
  "url": "https://gitee.com/",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "大渡口",
    "city": "重庆",
    "country": "中国"
  },
  "links": [
    {
      "name": "Axios中文文档",
      "url": "http://www.axios-js.com/zh-cn/docs/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

1.3.2.4 beforeRouteEnter 中进行异步请求

<script>
  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)
        })
      }
    }
  }
</script>

1.3.2.5 路由钩子和axios结合结果

在这里插入图片描述



以上是关于Vue--自定义404页面 & 路由钩子&路由钩子与异步请求的主要内容,如果未能解决你的问题,请参考以下文章

vue 笔记(十七) 404和路由钩子

Vue 路由拦截、http拦截

Spring Security 未路由到自定义登录页面 404 错误

自定义 ASP.NET MVC 404 错误页面的路由

VueRouter和Vue生命周期(钩子函数)

CodeIgniter 路由和 404 自定义错误