404和路由钩子

路由模式有两种：

• hash 路径带 #
• histroy 路径不带 #

修改路由配置：

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

404配置

router配置

{
path: '*',  //匹配所有请求
component: NotFound
}

创建 NotFound.vue

<template>
  <div>
    <h1>  404 not found</h1>
  </div>
</template>

<script>
    export default {
        name: "NotFound"
    }
</script>

<style scoped>

</style>

当请求不在 path 中时，会显示 404 not found

路由钩子

<template>
<!-- 注意： 所有元素必须有标签包起来，不能直接暴露在根节点下-->
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>
</template>

<script>
    export default {
        props: ['id'],
        name: "userProfile",
        beforeRouteEnter: (to, from, next)=>{
            console.log("enter");
            next();
        },
        beforeRouteLeave: (to, from, next)=>{
            console.log("Leave");
            next();
        }
    }
</script>

<style scoped>

</style>

参数说明：

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