Vue 嵌套路由

逃离我推掉我的手 2022-12-22 15:26 596阅读 0赞

第一步:News.vue

  1. <template>
  2. <div>
  3. <h2>News</h2>
  4. <br>
  5. <router-link to="/details">Details</router-link>
  6. <router-view></router-view> <!-- 嵌套 -->
  7. </div>
  8. </template>
  9. <style scoped> div{ background-color: aqua; } </style>

第二步:Details.vue

  1. <template>
  2. <div>
  3. <h2>Details</h2>
  4. </div>
  5. </template>
  6. <style scoped> div{ text-align: center; font-size: 38px; color: sienna; } </style>

第三步:router目录下的index.js

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. // 将Vue挂载到Router中,接下来就可以使用Router了
  4. Vue.use(VueRouter)
  5. const routes = [{
  6. path: '/news',
  7. component: () => import('../views/News.vue'), // 懒加载
  8. children: [{
  9. path: '/details',
  10. component: () => import('../views/Details') // 懒加载
  11. }]
  12. }]
  13. const router = new VueRouter({
  14. mode: 'history',
  15. base: process.env.BASE_URL,
  16. routes
  17. })
  18. export default router
  19. 效果:
  • News页面:
    在这里插入图片描述
  • 单击Details

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,596人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue 嵌套

    文章目录 嵌套路由 具体实现 嵌套路由 说白了就是选项卡中又嵌套一个选项卡。 可以看看官方的例子 [传送门][Link 1] 具体

    相关 Vue嵌套(子

    路由的嵌套就是点击一个路由地址后,继续点击,进入到另外一个路由地址下,即第二个路由就是第一个路由的子路由。 根据我们前面学习的VueRouter的知识,可以直接写出代码来实

    相关 vue嵌套

    嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <rou