首页 > 网页制作  > 前端开发

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

admin 前端开发 2021-05-25 09:28:11 vue 
后台-系统设置-扩展变量-手机广告位-内容正文底部

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结合结果

在这里插入图片描述



文章来源:https://blog.csdn.net/I_r_o_n_M_a_n/article/details/117172450

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/qianduankaifa/30860.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码