15.0、vue-路由钩子和404

15.0、vue-路由钩子和404

404也就时请求的页面找不到，那该如何只用前端来完成这项功能呢？

首先创建一个Notfound.vue组件如下：

<template>
    <h1>404您访问的页面走丢了</h1>
</template>
<script>
export default {
  name: 'Notfound'
}
</script>
<style scoped>
</style>

然后在路由index.js文件中的router属性最后加上这个组件即可

当所有路由url都不匹配时就会跳转到Notfound.vue组件显示404您访问的页面找不到

import Vue from 'vue'
import Router from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
import Login from '../components/Login'
import UserManager from '../components/user/UserManager'
import Notfound from '../components/Notfound'
Vue.use(Router)
export default new Router({
  routes: [
    {
      // 路由路径
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/gotologin',
      redirect: '/Login'
    },
    {
      // 配置404路由路径
      path: '*',
      name: 'Notfound',
      component: Notfound
    }
  ]
})

路由钩子与异步请求：

beforeRouteEnter：在进入路由前执行

beforeRouteLeave：在离开路由前执行

第一步：

用cnpm install axios -s命令行下载axios

用cnpm install --save axios vue-axios命令行下载vue-axios

第二步：

在main.js中导入相关依赖，以及显式的调用axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

第三步：将data.json文件放到static文件夹下这样才能访问到。

第四步：在Content.vue文件中代码如下：

在beforeRouterEnter中调用下面的getData方法，在getData方法中获取data.json文件

<template>
   <div>
         <h1>内容页</h1>
   </div>
</template>
<script>
export default {
  name: 'Content',
  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>