Vue路由没有看懂的部分暂时记一下

示例

route/index.js 路由页面

export default new Router({
    mode: 'history', // 去掉url中的#
    scrollBehavior: () => ({ y: 0 }),
    routes: [{
        path: '/redirect',
        component: Layout,
        hidden: true,
        children: [{//子路由
            path: '/redirect/:path(.*)',//动态路由
            component: (resolve) => require(['@/views/redirect'], resolve)
        }]
    },{
      //更多路由 ... ...
    }]
})

views/redirect.vue

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

问题:

1. /redirect/:path(.*) 表达式上什么意思 ?

草草看了一下 https://github.com/pillarjs/path-to-regexp/tree/v1.7.0 , 待详细了解

2. component: (resolve) => require(['@/views/redirect'], resolve) 上什么意思 ?

3. 下面代码 created() 和 render(h) 是Router中的方法吗 , 里面的内容是什么意思

export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message 注释意思是:避免警告信息
  }
}

答: create() 方法的意思是导航完成后获取数据 , 参考链接 ; vue有自带的render函数 , router中的render函数的作用待深入了解

 

posted on 2021-12-23 17:56  hi-gdl  阅读(430)  评论(0编辑  收藏  举报

导航