路由模式有两种
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)
})
}
}
}