Vue进阶（三十三）：详解express router和Vue router

• 1、express的router是属于后端的，Vue的router是属于前端的。
• 2、服务端渲染时，express的router把数据和模板传给模板引擎的；客户端渲染时，通过路由去获得静态页面，浏览器发送http请求向服务端获取数据，Vue router是不需要传数据的。
• 3、express的middleware可以检测有没有登录，有没有输入正确的密码，跟Vue router里面的导航守卫有点类似。

Middleware functions allow you to take action on any incoming request and modify it before sending back a response.

app.use( function(req, res, next) {
  var shirt = req.shirt
  if (shirt) { next()
  }
})

router.beforeEach((to, from, next) => {
  // ...
})

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

express router和Vue router里面都有重定向，原来是http就有规定redirect，http状态码是以300开头的，默认是302，重定向也分为3种

• permanent
• temporary
• special

每一种都对于不同的状态码
JavaScript中的window.location=""也表示重定向
the router routes you to a route
Vue router里面的导航守卫

全局守卫

beforeEach 一定要写next
beforeResolve
afterEach 是没有next参数的

路由独享

beforeEnter 参数和beforeEach一样

在组件中的守卫

beforeRouteEnter
// 它是不能访问该组件的实例，但是可以在next中处理回调，把组件实例vm当做参数传到回调函数里面去，就可以访问组件实例了
beforeRouteUpdate
// 可以访问组件实例，next不可以传回调函数
beforeRouteLeave
// 可以访问组件实例，next不可以传回调函数
要理解导航守卫（navigation guards），导航表示路由正在发生变化，守卫有很多钩子函数
window.location.hash，表示散列，是以#开头的，#后面的值对于ajax很有帮助

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/86286598