404和路由钩子

2022-08-14 17:01:19 阅读：153 来源： 互联网

获取登录后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,路由
来源： https://www.cnblogs.com/doremi429/p/16585754.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

404和路由钩子