1、准备工作:
在组件文件夹中,添加两个组件
1.homemessage.vue
2.homenews.vue
2、详细步骤(index.js中配置):
1、在index.js中导入组件(懒加载)
import(’…/components/homenews.vue’)
import(’…/components/homemessage.vue’)
2、在routes数组的home对象中添加属性:children
3、在children中配置两个子组件的映射信息
{
path:'news',
component:homenews
},
3、详细步骤(home.vue中配置显示信息):
1、在home.vue中添加标签配置两个子组件
的路由映射
2、在home.vue中添加<router-view>标签用于展示子组件
注:<router-link>中的路径需要写完整,最前面需要添加
代码及效果如下:
const routes = [
//5.映射path与组件的关系
{
path:'/h