vue-制作404页面与进入路由前执行axios得到数据再渲染

路由模式有两种

hash：路径带 # 符号，如 http://localhost/#/login

history：路径不带 # 符号，如 http://localhost/login

修改路由配置，代码如下：

export default new Router({
  mode: 'history',
  routes: [
  ]
});

制作404页面

1.组件页面：

<template>
    <div>
      <h1>404,你的页面走丢了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

2.路由存在的路径就执行，没有的都执行*号组件

import NotFound from '../views/NotFound'
export default new Router({
  mode: 'history',
  routes: [
  {
   path: '*',
   component: NotFound
}
  ]
});

进入路由前后执行axios渲染数据

//将下面response.data这个数据库获得的对象数据封装到组件的data设置的集合中，然后在template里遍历显示

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

参数说明:
to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.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) {
        //将response.data这个数据库获得的对象数据封装到
        //组件的data设置的集合中，然后在template里遍历显示
          console.log(response.data)
        })
      }
    }
  }