---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：路由

---

路由相关定义

路由器

机制：路由和转送

• 决定数据包从来源到目的地的路径
• 将输入端的数据转移到合适的输出端

路由表

本质上是映射表，决定了数据包的指向

• 内网IP->电脑mac

网络

• 公网IP：网络单位唯一标识
• 内网IP：192.168.1.1
• mac地址：电脑唯一标识

改变URL不刷新的方法

改变URL的hash

在网页Console中

• location.hash=‘home’

使用history

history.pushState({},‘’,‘home’)

• 入栈

history.back

• 出栈

history.go()

• -1:等同于back
  1：等同于history.forward
  可以弹出或压入多个

history.replaceState({},‘’,‘home’)

• 替换

路由的使用

1. 安装router插件
2. 配置路由信息(index.js)

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home form '../componennts/Home'

//路由懒加载
const HomeNews = ()=> import('../components/HomeNews')

const routes = [
	{
	path:'/',
	//重定向
	redirect:'/home'
	 },
	{
	path:'/home',
	component:Home,
	mata: {
	title: '首页'
	}
	//路由嵌套
	children:[
	{
	path:'/',
	redirect:'news'
	}
	{
	path:'news'
	component:HomeNews
	]},
	//动态加载URL
	{
	path:'/user/:abc',
	component:user
	}
	
]

Vue.use(VueRouter)
const router = new VueRouter({
	routes,
	//更改hash模式到history模式
	mode:history,
	//活跃状态下的router-link的class名字更改
	linkActiveClass:'class名'
)}

//导航守卫
router.beforeEach((to,from,next) =>{
//改变网页标题
	documnet.title = to.meta.title;
	//嵌套路由:documnet.title = to.matched.meta.title;
	next();
})

//将router对象导出到vue实例(main.js)中
export  default router 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

router相关属性

router-link标签属性

tag

• 渲染后的组件类型

replace
active-class

• 更改活跃link的class命名

更改URL

• this.$router.push(‘/path’)
• this.$router.repalce

获取URL

• this.$route.params.abc

路由的懒加载

用到时再加载

• 懒加载的方式

嵌套路由

在router文件夹下的index.js下增加映射关系

• children:[{}]

在相应的组件中增加

路由之间传递参数

• params(参数)

1. 配置路由格式：/router/:id
2. 传递的方式：在path后面跟上对应的值
3. 传递后形成的路径：/router/123

• query(查询)

1. 普通路由配置：/router
2. 传递方式：对象中使用query的key作为传递方式
3. 传递后形成的路径：/router?id=123

<router-link :to="{path:'/User',query:{name='zjc',age=20}}">用户</router-link>

//使用button组件
<button @click="userClick">用户</button>

<script>
methods:{
	userClick(){
	this.$router.push({
	path:'User',
	query:{
	name='zjc',
	age=20
	} 
	}}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

URL格式：协议://主机:端口/路径?查询#片段 scheme://host:port/path?query#fragment

$route/router

$router
整个路由实例
$route
当前处于活跃的路由
所有的组件都继承自Vue的原型

路由导航守卫

前置钩子

• router.beforeEach((to,from,next) => {})
  next()//必须调用

后置钩子：afterEach((to,from))

路由状态保存

keep-alive时Vue内置组件，包含的组件保留状态，避免重新渲染
1

属性

• include/exclude：字符串或正则表达式
  匹配的组件缓存与否

特有可实现的两个函数

• activated/deactivated
  活跃与否

使用path变量记录离开时的路径，实现路由缓存

activated() {
this.$router.push(this.path);
},
//组件内导航
 beaforeRouteLeave (to,from,next){
 	console.log(this.$route.path)
 	this.path = this.$route.path;
	next();
	}
1
2
3
4
5
6
7
8
9

前端渲染和后端渲染

一、后端渲染

后端处理URL和页面之间的映射关系

• URL发送到服务器，服务器会通过正则对URL进行匹配，最后交给Controller进行处理

jsp:java serve page/PHP

• java代码作用
  从数据库读取数据，并将它动态的放在页面中

二、前后端分离阶段

网页内容主要由前端的js代码在浏览器执行

• 后端分为静态资源服务器、提供API接口的服务

页面渲染过程

1. 通过URL获取静态资源（html、css、js）
2. js代码由浏览器执行，Ajax使用API接口请求数据
3. 从API服务获取数据，再由浏览器的js代码渲染

三、前端渲染：单页面富应用阶段（SPA）

前端路由

• 浏览器管理URL和页面的映射关系

核心

• 改变URL，页面不进行整体刷新
• 整个网页只有一个html页面

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》