首先得需要插件支持:syntax-dynamic-import
import Vue from 'vue'
import VueRouter from 'vue-router'
/*import First from '@/components/First'
import Second from '@/components/Second'*/
Vue.use(VueRouter)
//方案1
const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");
const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue");
const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue");
const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue");
//方案2
const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1')
const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1')
const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')
const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2')
//懒加载路由
const routes = [
{ //当首次进入页面时,页面没有显示任何组件;让页面一加载进来就默认显示first页面
path:'/', //重定向,就是给它重新指定一个方向,加载一个组件;
component:first
},
{
path:'/first',
component:first
},
{
path:'/second',
component:second
}, {
path:'/three',
component:three
},
{
path:'/four',
component:four
}
//这里require组件路径根据自己的配置引入
]
//最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。
const router = new VueRouter({
routes
})
export default router;
https://www.zhihu.com/question/50121629
// 进入路由
beforeRouteEnter (to, from, next) {
getPost(to.params.id, post => {
// 由于组件还没有初始化, this 不存在
// next 接受一个回调, 用于切换路由后执行, 可以通过vm获取实例
next(vm => {
vm.post = post
})
})
},
// 路由变化
beforeRouteUpdate (to, from, next) {
getPost(to.params.id, (post) => {
// 组件已经初始化, this 存在
this.post = post
next()
})
}
如果我们需要使用 Vuex ,可能会遇到更多问题:
- 无法获取 $store ( beforeRouteEnter中无法获取this )
- 无法获取组件实例的 methods( beforeRouteEnter中无法获取this )
- 无法控制 dispatch 流程
个人比较习惯这样解决:
首先封装 Promise 用于控制 dispatch 流。
// store.js
const generate = commit => (id, mutation) => {
return new Promise((resolve, reject) => {
getPost(id).then(data => {
commit(mutation, data)
resolve()
})
})
}
正常使用 actions 和 mutations。
// store.js
[action.yourAction] ({ commit, state }) {
return generate(commit)(yourId, mutation.yourMutation)
},
[mutation.yourMutation] (state, data) {
state.yourPost = data
}
在组件中使用引入store,并运用 Promise 控制流程。
// YourComponent.vue
import store from './yourRoute/store.js'
export default {
beforeRouteEnter: (to, from, next) => {
Promise.all([
store.dispatch(types.yourModule.action.yourAction)
]).then(() => {
next()
})
},
computed: {
...mapGetters({
yourPost: types.yourModule.getter.yourPost
})
},
}
先异步请求数据,动态构建好router,再初始化App组件。index.html里面加个loading效果,App组件创建好会自动替换掉它。
import Vue
from
'vue'
import VueRouter
from
'vue-router'
/*import First from '@/components/First'
import Second from '@/components/Second'*/
Vue.use(VueRouter)
//方案1
const
first =()=>import(
/* webpackChunkName: "group-foo" */
"../components/first.vue"
);
const
second = ()=>import(
/* webpackChunkName: "group-foo" */
"../components/second.vue"
);
const
three = ()=>import(
/* webpackChunkName: "group-fooo" */
"../components/three.vue"
);
const
four = ()=>import(
/* webpackChunkName: "group-fooo" */
"../components/four.vue"
);
//方案2
const
first = r => require.ensure([], () => r(require(
'../components/first.vue'
)),
'chunkname1'
)
const
second = r => require.ensure([], () => r(require(
'../components/second.vue'
)),
'chunkname1'
)
const
three = r => require.ensure([], () => r(require(
'../components/three.vue'
)),
'chunkname2'
)
const
four = r => require.ensure([], () => r(require(
'../components/four.vue'
)),
'chunkname2'
)
//懒加载路由
const
routes = [
{
//当首次进入页面时,页面没有显示任何组件;让页面一加载进来就默认显示first页面
path:
'/'
,
//重定向,就是给它重新指定一个方向,加载一个组件;
component:first
},
{
path:
'/first'
,
component:first
},
{
path:
'/second'
,
component:second
}, {
path:
'/three'
,
component:three
},
{
path:
'/four'
,
component:four
}
//这里require组件路径根据自己的配置引入
]
//最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。
const
router =
new
VueRouter({
routes
})
export
default
router;