路由简介
路由(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 区别:
- mode:“hash” 多了 “#”
http://localhost:8080/#/login
- 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
优缺点:
第一个和第三个方法,传递的参数会跟在路由后面,暴露了信息;第二个方法, 传递的参数不会跟在路由后面,但是页面刷新参数也会清空。