前端面试题锦集:第三期VueRouter

// 定义routerView组件

export default {
  name: 'RouterView',
  render (_, { props, children, parent, data }) {
    const h = parent.$createElement
    const route = parent.$route
    
    const matched = route.matched[depth]
    const component = matched && matched.components[name]
    ...
    // 没匹配到组件 则渲染空节点
    if (!matched || !component) {
      cache[name] = null
      return h()
    }
    ...
    // 匹配到 则渲染该组件
    return h(component, data, children)
  }

}

export default {
  name: 'RouterLink',
  props: {
    to: {
      type: toTypes,
      required: true
    },
    tag: {
      type: String,
      default: 'a'
    },
  }
  render (h: Function) {
    const router = this.$router
    const current = this.$route
    ...
    // 渲染
    return h(this.tag, data, this.$slots.default)
  }
}

// 动态路由配置
const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

const normalizeLocation = () => {
  //...
  return {
    _normalized: true,
    path,
    query,
    hash
  }
}
// match方法
export const match(rawLocation,currentRoute,redirectedFrom){
  
  // 定义location
  const location = normalizeLocation(rawLocation,currentRoute,false,router)
  const { name } = location
  if(name){
    ...
    return _createRoute(record, location, redirectedFrom)
  }else if(location.path){
    ...
    return _createRoute(record, location, redirectedFrom)
  }
  // 什么都没有
  return _createRoute(null, location)
}
// createRoute

const _createRoute = (recordRoute,location,router){
  const route = {
    name:location.name || recordRoute.name,
    meta:recordRoute.meta || {},
    path:location.path || '/',
    hash:location.hash || '',
    query:,
    params:location.params || {},
    ...
  }
  return Object.freeze(route)
}

const router = new VueRouter({ ... })

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

const router = new VueRouter({ ... })

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

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

// 模板
class VueRouter {
  read(){
    console.log('ready')
  }
  push(){
    console.log('push')
  }
  go(){
    console.log('go')
  }
  testHook(){
    return window.confirm( '执行ready?' );
  }
  init(){
    if(this.testHook()){
      this.read()
    }
  }
}

let testRouter = new VueRouter();
testRouter.init()

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

function scrollToPosition(shouldScroll, position){
  // ...略
   if (position) {
    // $flow-disable-line
    if ('scrollBehavior' in document.documentElement.style) {
      window.scrollTo({
        left: position.x,
        top: position.y,
        // $flow-disable-line
        behavior: shouldScroll.behavior
      })
    } else {
      window.scrollTo(position.x, position.y)
    }
  }
}