2021SC@SDUSC 软件工程应用与实践（13）——路由钩子

2021SC@SDUSC

一、引言

本篇文章将对老年照护健康知识图谱项目中使用的路由钩子和路由模式进行分析。

二、代码分析

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.路由钩子与异步请求

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 是组件实例