2021SC@SDUSC 软件工程应用与实践（3）——router

2021SC@SDUSC

一、引言

本篇文章将对老年健康知识图谱系统中使用到的vue router路由进行分析。

二、代码分析

1.前端路由

hash 模式

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。
类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：

http://www.xxx.com/#/login

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

history 模式

14年后，因为 HTML5 标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate () {
   // todo 匹配路径 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)

2.vue-router

vue-router : 简称路由，简单说就是根据不同的 url 地址，显示不同的效果。
router-link : 组件用于帮助用户进行 导航 ，也就是我们传统的 a 标签经常做的事；a 的标签用 href 属性来指定导航的目标地址，而 router-link组件则用 to 属性来定目标地址；router-view : 是路由的出口，路由匹配到的组件将 渲染 在这里,即渲染 router-link指向的目标地址。同一个路径可以匹配多个路由，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

创建简单的vue-router

首先我们需要把 vue-router添加到页面，可直接用 script 引入页面

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

也可以使用模块化机制编程，导入 Vue 和 Vue-router,要调用 Vue.use(VueRouter) ;
router-link 和 router-view 不必成双对的出现，可根据配置的不同路由渲染到一个 router-view

<div id='router'>
  <router-link to='/home'>Go to Home</router-link>
  <router-link to='/new'>Go to New</router-link>
  <router-view></router-view>
</div>
//JavaScript 代码
//1.创建组件
 const Home={
    template:`<span>我是主页</span>`
  };
  const News={
    template:`<span>我是新闻</span>`
  };
//2.配置路由
  const routersname=[
    {
    path:'/home',component:Home
  },
    {
        path:'/new',component:News
  },
    //重定向
    {
      path:'*',redirect:'/home'
    }];
//3.生成路由实例
 const router=new VueRouter({
  routes:routersname
  //此时 routers 和 routername 并不相等，所以不能在采用 es6 里面对象的简写方法
  });
  new Vue({
      el:'#router',
      router
  })

在创建路由实例的时候应该知道其中使用了 ES6 对象里面简洁的语法；即在 ES6 中只写属性名不写属性值时，属性值就代表属性名所代表的变量。

const router = new VueRouter({
  routes  // （缩写）相当于 routes: routes 是 ES6 对象里面简洁的语法
})