Vue学习杂记（八）——SPA模式和前端路由

SPA模式和前端路由

一、SPA模式介绍
二、前端路由工作原理
三、配置前端路由
三、路由的其他使用方式
四、动态路由与参数说明
五、导航卫士

一、SPA模式介绍

SPA（single page web application），SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。如今SPA的应用逐渐显著，像Vue和react都是采用这种模式。

二、前端路由工作原理

（1）用户点击页面中的路由连接；
（2）导致URL地址栏中的Hash值发生了改变；
（3）前端路由监听到了Hash地址的变化；
（4）前端路由将当前Hash地址渲染到浏览器中。
数据模拟测试（利用锚点实现修改导航栏路由）：

通过window对象我们能够绑定监听到hash地址的变化，hash地址是网站初始url后边的内容，可以通过location来获取到。

三、配置前端路由

Vue.js拥有自己的处理单页面的前端路由环境，因此没必要使用最原生的监听hash变化切换路由。路由的配置方式如下：

npm i vue-router@3.5.2 -S

在根目录下创建route文件，并在目录下新建一个index.js，在其中构建路由的初始化配置：

// 导入路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'// 挂载路由模块
Vue.use(VueRouter)// 创建路由实例对象
const router = new VueRouter()// 向外导出路由模块
export default router

初始化完成之后，需要在main.js中引入路由模块，这样才能够在代码中使用路由，使用方式如下：
引入路由模块：

import routeObj from '@/route/index.js'
//import routeObj from '@/route'
//如果导入的模块是文件，那么将会默认导入文件下面的index.js文件

同时需要在构建vue实例的时候增加route模块：

new Vue({render: h => h(App),router: routeObj//引入路由模块,注意这里的名字叫做router
}).$mount('#app')

在前端路由中，路由通过组件名称引入对应的页面，每一个组件对应一个具体页面，使用方法如下：
（1）首先引入组件：

import Home from '@/components/home.vue'
import Movie from '@/components/movie.vue'
import About from '@/components/about.vue'

（2）构建路由的绑定关系：

 routes: [{path: '/home', component: Home},{path: '/movie', component: Movie},{path: '/about', component: About}]

在页面中使用路由：

 <router-link to="/home">首页</router-link><router-link to="/movie">电影</router-link><router-link to="/about">关于</router-link><!--占位符，之后存放实际路由组件的具体内容--><router-view></router-view>

说明：这里实现的功能是，router-link相当于a连接，可以用来切换页面。切后的页面内容将出现在占位符中。

三、路由的其他使用方式

（1）路由的默认配置：

{path: '/', component: Home},

（2）路由的重定向：
使用方法比较简单：

 {path: '/', redirect: '/about'},

补充说明：vue的路由和thinkPHP类似，默认匹配最近路由，换句话说，如果当前路由规则有多条，默认匹配最开始的那条。
（3）嵌套路由：
这里的嵌套路由指的是路由对应的组件页面中，本身还包含有相对应的路由规则，使用方法如下（以在首页中配置默认路由为例）：

 <div class="home-container">首页<router-link to="/tab1">tab1</router-link><router-link to="/tab2">tab2</router-link><!--占位符，之后存放实际路由组件的具体内容--><router-view></router-view></div>

对应的router/index.js文件里面的路由配置：

{path: '/home',component: Home,redirect:'/home/tab1',//和第一行的子路由配置一个意思children: [{ path: '/', component: Tab1 },{ path: '/home/tab1', component: Tab1, alias:'/nightowl' },//alias为路由设置别名{ path: '/home/tab2', component: Tab2 }]},

四、动态路由与参数说明

（1）动态路由：
在thinkPHP中也测出现过如下路由匹配规则：

http://localhost/index.php?student/show/:id

用来获取学生信息，动态传递学生的id信息。在Vue的路由规则中，同样支持使用这样的动态路由规则，因为如同上面提到的电影组件，我们可能存在很多部电影，但我们不可能不去复用电影模本，这是我们也可以参照这种后端写法，获取电影的id信息，动态渲染到页面中，使用方法如下：

{path: '/movie',component: Movie,children: [//如下写法显然尴尬//{ path: '/1', component: Movie}//{ path: '/2', component: Movie}///...{ path: '/:id', component: Movie, props: true }//props是用来开启参数的可视化，默认为false]},

在组件中获取参数：

开启props之后可以利用$route.params获取到绑定的动态路由。
（2）path与fullPath：
可以看出，这里的路由有很多参数，比如说比较清晰的path和fullPath，但是总觉得这两个应该是不同的参数，fullPath按照语义应该更长。fullPath其实用在有个get请求的环境下更好理解：

结论：fullPath=path+query，但是注意一点，query类似于cookie的键值对方式处理，不存在类型鉴别，实际可能需要手动将num转为整型。
（3）重定向的高级用法：

  redirect: (params) => {console.log('输出param参数：', params)return '/home/tab2'},

redirect可以写成函数形式，但是获取到的参数params其实就是this.$route里面的内容，对于redirect而言，这里使用的其实是只读参数。修改的话会提示read only报错，利用return可以返回重定向之后的路径。

五、导航卫士

跳转卫士其实挺容易理解的，利用beforeEach向router上面挂载导航卫士，挂载的导航卫士里面包含一个闭包函数（to,before,next）=>{}，其中第一参数表示跳转的目的路由信息，from表示的是当前路由信息，next是一个回调函数，类似于promise里面的resolve()函数，使用举例如下：

router.beforeEach((to, from, next) => {console.log('输出before,from参数', to, from)if (to.path === '/home' || to.path === '/movie') {next()} else {console.log('当前路由无法匹配')next('/home')//没有匹配默认跳回去}
})

限制跳转到home与movie组件。