2021SC@SDUSC 软件工程应用与实践（5）——页面路由

2021SC@SDUSC

一、引言

本篇博客将分析和介绍项目中的页面路由。

二、代码分析

1.页面路由的简介

要介绍页面路由，首先就要介绍单页面富应用程序（SPA）：
所谓SPA，就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。
在项目的前端部分会用到前端路由，即根据不同的路径请求不同的资源，进而显示不同的页面的过程。
要在Vue中实现SPA，就需要使用vue-router实现页面路由。vue-router是vue.js官方提供的一个路由管理器。
Vue Router具有以下特性：
支持H5历史模式或者hash模式；支持嵌套路由；支持路由参数；支持编程式路由；支持命名路由；支持路由导航守卫；支持路由过渡动画特效；支持路由懒加载；支持路由滚动行为。

2.使用vue-router来实现页面路由的方法

（1）首先导入vue-router组件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

（2）添加路由填充位

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>
<style>
</style>

（3）引入路由组件（在主目录下创建router目录，里面创建一个index.js页面）

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入HelloWorld.vue页面
import HelloWorld from '../components/HelloWorld.vue'

Vue.use(VueRouter)

（4）配置路由规则并创建路由实例（index.js）

const routes = [
    { path: '/', redirect: '/helloWorld' },
    { path: '/helloWorld', component: HelloWorld }
]
// 创建路由实例
const router = new VueRouter({
    routes
})
export default router

routes是路由规则数组，每一个路由规则都是一个对象，对象中至少包含path和component两个属性。path表示路由匹配的hash地址，component表示路由规则对应要展示的组件对象。redirect属性：重定向属性，即访问path的地址会自动重定向到目标重定向的地址 。
export导出，方便在main.js中用import引入。

（5）引入路由规则并挂载到Vue根实例中

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

为了能让路由规则生效，必须把路由挂载到Vue实例对象上。
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。newVue时，el和$mount并没有本质上的不同。