vue-router

路由简介

路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。 — 维基百科

前端路由的核心

改变URL，但是页面不进行整体的刷新。

vue-Router两种模式

hash模式：浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。

history模式 ：HTML5，History interface提供了两个新的方法： pushState(),
浏览器不会向服务端请求数据，直接改变url地址，可以类似的理解为变相版的hash；但不像hash一样，浏览器会记录pushState的历史记录，可以使用浏览器的前进、后退功能作用
replaceState()：不同于pushState，replaceState仅仅是修改了对应的历史记录

HTML5的history模式

history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面. history.pushState()

如何设置路由模式

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

mode 区别：

1. mode:“hash” 多了 “#”

http://localhost:8080/#/login

2. mode:“history”

http://localhost:8080/home

vue-router介绍

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

vue-router是基于路由和组件的

路由用于设定访问路径, 将路径和组件映射起来.在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

编程式：this.$router.push({path:’/newDetail/495’});

组件式：< router-link to="/user/useradd"> 增加用户 < /router-link>

传参

方法一

// 定义路由
{
	path: '/task/:id',
	name: 'Task',
	component: Task
}
// 路由跳转、传参
this.$router.push({
	path: `/task/${id}`
})
// 页面调用
this.$route.params.id

方法二

{
	path: '/task',
	name: 'Task',
	component: Task
}
// 路由传参
this.$router.push({
	name: 'Task',
	params: {
		id: 1
	}
})
// 页面调用
this.$route.params.id

方法三

{
	path: '/task',
	name: 'Task',
	component: Task
}
// 路由传参
this.$router.push({
	path: '/task',
	query: {
		id: 1
	}
})
// 页面获取id
this.$route.query.id

优缺点：

第一个和第三个方法，传递的参数会跟在路由后面，暴露了信息；第二个方法， 传递的参数不会跟在路由后面，但是页面刷新参数也会清空。