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