vue组件中的路由钩子与axios异步请求

十五、路由钩子与异步请求

1. 路由模式与 404

路由模式有两种

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

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

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

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

  404界面：

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

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

  2. 修改路由配置index.js

     import NotFound from '../views/NotFound'
     {
        path: '*',
        component: NotFound
     }
     

2. 路由钩子与异步请求

可以先了解一下 Vue的生命周期

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

在Profile.vue中写:

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

参数说明：

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

3. 在钩子函数中使用异步请求

1. 安装 Axios

   cnpm install axios --save
   cnpm install --save vue-axios
   

2. main.js引用 Axios

   import axios from 'axios'
   import VueAxios from 'vue-axios'
   Vue.use(VueAxios, axios)
   

3. 准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
   数据和之前用的json数据一样 需要的去上述axios例子里

   // 静态数据存放的位置
   static/mock/data.json
   

4. 在 beforeRouteEnter 中进行异步请求

   Profile.vue:

     export default {
       //第二种取值方式
       // props:['id'],
       name: "UserProfile",
       //钩子函数 过滤器
       beforeRouteEnter: (to, from, next) => {
         //加载数据
         console.log("进入路由之前")
         next(vm => {
           //进入路由之前执行getData方法
           vm.getData()
         });
       },
       beforeRouteLeave: (to, from, next) => {
         console.log("离开路由之前")
         next();
       },
       //axios
       methods: {
         getData: function () {
           this.axios({
             method: 'get',
             url: 'http://localhost:8080/static/mock/data.json'
           }).then(function (response) {
             console.log(response)
           })
         }
       }
     }