404和路由钩子
- index.js中的export default new Router 下写入 mode: 'history',可以去除链接中的#
新建一个NotFound.vue
<template> <div> <h1>404!页面找不到</h1> </div> </template> <script> export default { name: "NotFound" } </script> <style scoped> </style>
index.js中导入,写入router
import NotFound from '../views/NotFound'
{ path: '/*', component: NotFound },
安装axios
npm install axios -s
在main.js中导入
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
Profile.vue
<script> export default { props: ['id'], name: "Profile", //进入路由前 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>
参数说明:
- to:路由将要跳转的路径信息
- from:路径跳转前的路径信息
- next:路由的控制参数
- next() 跳入下一个页面
- next('/path') 改变路由的跳转方向,使其跳到另一个路由
- next(false) 返回原来的页面
- next((vm)=>{}) 仅在 beforeRouteEnter 中可用,vm 是组件实例
来源:https://www.cnblogs.com/pinked/p/12329658.html