Vue Router 2.0 学习持续归档...

• @2018/06/18 官方文档Guide-Essentials部分学习摘要
• @2018/06/18 结合实际开发遇到的一些问题总结和资料查询
  • 为什么要有 hash 和 history

官方文档的示例代码

// literal string path
router.push('home')
// object
router.push({ path: 'home' })
// named route
router.push({ name: 'user', params: { userId: 123 }})
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = 123
// -> /user/123
router.push({ name: 'user', params: { userId }}) 
// -> /user/123
router.push({ path: `/user/${userId}` }) 
// This will NOT work, -> /user
router.push({ path: '/user', params: { userId }})


const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // the function receives the target route as the argument
      // return redirect path/location here.
    }}
  ]
})


const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },
    // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})


const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})


const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

要点摘录

• API Reference: $route.params, $route.query, $route.hash, TODO deeper learning need
• Reacting params changes, the same component instance will be reused, lifecycle hooks of the component will not be called. Two ways to solve it:
  • watch the $route object
  • use the beforeRouteUpdate(only for same component) guard introduced in 2.2
• Rue-router uses path-to-regexp as its path matching engine, so it supports many advanced matching patterns.
• Nested routes: note that nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.
• Programmatic navigation( push vs replace vs go)
  • <router-link :to="..."> is the equivalent of calling router.push(...)
  • The argument can be a string path, or a location descriptor object.
  • Params are ignored if a path is provided, which is not the case for query(note: see example above).
  • $router.replace: Acts like router.push, the only difference is that it navigates without pushing a new history entry
  • $router.go: Takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack, similar to window.history.go(n).
  • All three methods are counterparts of window.history.pushState, window.history.replaceState and window.history.go.
• Your display multiple views in same path just by specify the components object in router and use multiple <vue-router> in template
• Your can use a function for dynamic redirecting.
• You can decouple $route with component by using props, route.params will be set as the component props.
• When props is an object, this will be set as the component props as-is. Useful for when the props are static.
• You can create a function that returns props. This allows you to cast parameters into other types, combine static values with route-based values, etc.
• HTML5 history mode
  • The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
  • To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload.

个人总结

• 对于同一个Component，params发生改变可以通过watch $route来监控变化。务必注意的是，如果跳走到了一个不同的Component，监控代码是不会被执行到的。
• 同理在项目开发中，beforeRouteUpdate代码没管用，文档说该方法是在在2.2中被引入的（自己Vue和Vue-Router的版本都是>2.2的），最终验证得知，beforeRouteUpdate是用来监听 param和query这一层次变化的。在项目开发中，最初的新增职位和编辑职位是同一个route和Component，互跳是可以用该钩子的，但是跳转到其他route需要用其他方式比如beforeEach进行判断。
• 关于自己使用$router.push({path, param})发现param参数不起作用，大概是因为把name跟path搞混了
• 关于hash 和 history 两种mode的异同
  • 可以在Vue-Router的传入参数中指定，都能用来最SPA应用，默认是has模式
  • hash把路由相关部分记录在#/之后，改变hash部分不会刷新页面，但是路径难看
  • history利用了html5新api，可以在切换历史状态，甚至修改历史状态，看起来路由更好看，问题是刷新以后会向后台发送HTTP请求，所以需要后台服务器进行一些简单的配置。那么问题来了，可以看一看HR端的后台服务器是怎么配置的吗？