404和路由钩子

获取登录后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