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函数的作用待深入了解