vue嵌套路由

最新推荐文章于 2025-12-03 11:05:25 发布

原创最新推荐文章于 2025-12-03 11:05:25 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了一个基于Vue框架的路由配置实例，包括了根组件App.vue中的路由链接设置、子路由的使用方法及其元信息的传递方式。通过具体的代码示例展示了如何在Home.vue组件中进一步配置子路由Home2.vue和Home3.vue。

App.vue

<!-- 入口 -->
<router-link to="/home">home</router-link>
<router-link to="/home1">home1</router-link>
<!-- 出口 -->
<router-view></router-view>

Home.vue

<h1>home</h1>
<router-view></router-view>

子Home2.vue

<h6>home2</h6>

子Home3.vue

<h6>home3</h6>

Home1.vue

<h1>home1</h1>

main.js

import Home from '@/components/Home.vue'
import Home1 from '@/components/Home1.vue'
import One from '@/components/Home2.vue'
import Two from '@/components/Home3.vue'

const router=new VueRouter({
  routes:[
    { path: '/home', component: Home ,children:[
      { path: 'one', meta:{title:'标题'},component: One },

        //meta携带参数 使用this.$route.meta.title可以调用这里面的数值

      { path: 'two', component: Two }
    ]},
    { path: '/home1', component: Home1 }
  ]
})