嵌套路由(最全步骤)

最新推荐文章于 2024-06-20 15:58:49 发布

J_kong

最新推荐文章于 2024-06-20 15:58:49 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_43751275/article/details/107966405

版权

本文详述了在Vue.js应用中实现嵌套路由的完整步骤，包括在组件文件夹创建homemessage和homenews子组件，在index.js中进行懒加载导入，并在home.vue中配置路由映射，展示子组件。

摘要由CSDN通过智能技术生成

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

关注

专栏目录