首页 > 其他分享 >404和路由钩子

404和路由钩子

时间:2022-08-14 16:55:19浏览次数:55  
标签:axios 钩子 vm next 404 props 路由

获取登录后username信息

this.$router.push("/main/"+this.form.username);
/main后加/ +传递的username (传入参数)

 

 index.js路由中path写入参数:name,并将props设为true

path: '/main/:name',
props: true,

 

 404界面:

  1、views中创建一个NotFound.vue视图组件

 

 

  2、index.js配置404路由

 

路由钩子: 

 

 如何获取data.json

在static包下新建一个mock(测试)包,在mock下建一个data.json,将相关数据复制进去

安装axios和vue-axios并导入

 

 在views下Profile中写axios

<template>

<!--  这里的东西要用一个标签包含起来,传递值也一样-->

  <div>
    <h1>个人信息</h1>
<!--    这里开启props true 就不用$了-->
    {{id}}
  </div>

</template>

<script>

    export default {
        props: ['id'],//index.js 开启了props true
        name: "UserProfile",
        //to:路由将要跳转的路径信息
        //from:路径跳转前的路径信息
        //next:路由的控制参数
        //next('/path')改变路由的跳转方向,使其跳到另一个路由
        //next(false)返回原来的页面
        //next((vm)=>{})仅在beforeRouteEnter中可用,vm是组件实例
       //过滤器 next相当于chain
        beforeRouteEnter:(to,from,next)=>{
            console.log("进入路由之前");//加载数据
            next(vm => {
              vm.getData();//进入路由之前执行getData方法
            });
        },
        beforeRouteLeave:(to, from, next) => {
            console.log("离开路由之后");
            next();
        },
      methods: {
          getData: function () {
            this.axios({
              method: 'get',
              url: 'http://localhost:8080/static/mock/data.json'
            }).then(function (response) {
                console.log(response)
            })
          }
      }
    }
</script>

<style scoped>

</style>

 

测试结果:

 

标签:axios,钩子,vm,next,404,props,路由
From: https://www.cnblogs.com/doremi429/p/16585754.html

相关文章

  • HCIA-Datacom 2.1 实验一:IPv4编址及IPv4路由基础实验
    实验目的掌握接口IPv4地址的配置方法理解LoopBack接口的作用与含义理解直连路由的产生原则掌握静态路由的配置方法并理解其生效的条件掌握通过PING工具测试网络层联通......
  • 路由嵌套
    在views包下在建个user包,写两个List和Profile视图,在Main.vue中用ElementUI导航栏在index.jsp中Main路由配置路由嵌套 ......
  • ExtJS - Router(路由)
    更新记录转载请注明出处:https://www.cnblogs.com/cqpanda/p/16581944.html2022年8月13日发布。2022年7月26日从笔记迁移到博客。ExtJS教程汇总:https://www.cnblogs......