import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// 1. 定义一些路由
// 每个路由都需要映射到一个组件。
const routes = [
{ path: '/home', component: ()=> import('../views//home.vue') },
{ path: '/about', component: ()=> import('../views/about.vue') },
]
const router = new VueRouter({
mode: 'hash', //默认是hash模式,url是带#号的
// mode: 'history', //history模式url不带#号
routes
})
export default router
hash模式主要是根据url的hash值来跳转不同的路由页面。
采用hash模式的路由模式中,url后面有一个#,#后面包括#就是此路由的hash值,hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件
vue中hash模式的原理就是通过监听hash值的变化来匹配不同的组件,进而来重新渲染视图。
优点
缺点
监听onhashchange事件案例:
src\views\home.vue
<template>
<div>
home
<button @click="handerHref">跳转</button>
</div>
</template>
<script>
export default {
name: 'home',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange)
},
computed:{
},
methods:{
handerHref(){
window.location.href = "http://localhost:8080/#/about"
},
onhashchange(e){
console.log(e.oldURL,'home');
console.log(e.newURL);
console.log(location.hash);
}
}
}
</script>
<style scoped>
</style>
src\views\about.vue
<template>
<div>
about
</div>
</template>
<script>
export default {
name: 'about',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange)
},
computed:{
},
methods:{
onhashchange(e){
console.log(e.oldURL,'about');
console.log(e.newURL);
console.log(location.hash);
}
}
}
</script>
<style scoped>
</style>
优点
缺点
history路由中我们使用onpopstate事件函数来监听history路由的变化,但是popstate事件函数只能监听到history.go、forward、back的切换路由方式,但是它不能够监听到pushState添加历史记录(就是在页面中点击某个a标签进行跳转的方式,点击页面顺序:a->b->c,记录的历史记录中a、b、c都存在,而replaceState则不同)、replaceState(点击页面顺序:a->b->c,记录的历史记录中只有a->c,即用c代替了b记录,b记录被删除了)切换路由的方式。
监听popstate、pushState、replaceState事件案例:
src\views\home.vue
<template>
<div>
home
<button @click="handerHref">跳转</button>
</div>
</template>
<script>
export default {
name: 'home',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange)
},
computed:{
},
methods:{
handerHref(){
window.location.href = "http://localhost:8080/#/about"
},
onhashchange(e){
console.log(e.oldURL,'home');
console.log(e.newURL);
console.log(location.hash);
}
}
}
</script>
<style scoped>
</style>
src\views\about.vue
<template>
<div>
about
<button @click="handerBack">返回</button>
</div>
</template>
<script>
export default {
name: 'about',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange) //hash模式跳转页面触发onhashchange事件
window.addEventListener("popstate", this.onpopstate) //popstate事件函数只能监听到history.go、forward、back的切换路由方式,但是它不能够监听到pushState添加历史记录
// 但是它不能够监听到pushState添加历史记录(就是在页面中点击某个a标签进行跳转的方式,点击页面顺序:a->b->c,记录的历史记录中a、b、c都存在,而replaceState则不同)、replaceState(点击页面顺序:a->b->c,记录的历史记录中只有a->c,即用c代替了b记录,b记录被删除了)切换路由的方式
// 对于pushState、replaceState需要通过函数重写的方式进行劫持,也就是说我们重写pushState和replaceState
// 但是我们一般都是pushState来跳转链接,是通过this.$router.replace()来触发;而pushState()是通过this.$router.push()来触发
// 重写pushState方法
const rawPushState = window.history.pushState
window.history.pushState = function (...args) {
rawPushState.apply(window.history, args)
console.log("终于监视到pushState了");
}
// 重写replaceState方法
const rawReplaceState = window.history.replaceState
window.history.replaceState = function (...args) {
rawReplaceState.apply(window.history, args)
console.log("终于监视到replaceState了");
}
},
computed:{
},
methods:{
handerBack(){
// window.location.reload() //刷新
// window.history.go(1) //前进
// window.history.go(-1) //后退
// window.history.forward() //前进
// window.history.back() //后退+刷新
this.$router.replace('/home')
},
onhashchange(e){
console.log(e.oldURL,'about');
console.log(e.newURL);
console.log(location.hash);
},
onpopstate(e){
console.log(e,'popstate')
}
}
}
</script>
<style scoped>
</style>
hash模式的url后跟hash值#…,它的原理就是使用window.onHashChange来监听hash值的改变,一旦发生变化就找出此hash值所匹配的组件,进而将组件渲染到页面中。但是hash模式这种带hash值的url是非常丑的,项目中也很少用hash模式。
history模式中的url是以/user这种格式,比较常见,它的原理是通过window.onpopstate来监听路由变化,进而匹配不同的组件来渲染出来。
在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history
vue中路由传参主要的3种方式:query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)
我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。
前后端分离开发模式,后端会把路由控制丢在前端,这几天再开发单页面小的项目,手动撸了个路由。前端路由实现有两种方法。HTML5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。hash + location.onhashchange
在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢
query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。
当服务端接收到HTTP请求时,可以通过onRequest() 获取到url, pathname,query,及paramParams参数;为了解析这些数据需要使用url和querystring模块
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!