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

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，596人围观）

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

相关阅读

    相关 Vue 嵌套路由

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

    桃扇骨桃扇骨/ 0 赞/ 104 阅读

    相关 Vue中路由嵌套（子路由）

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

    野性酷女野性酷女/ 0 赞/ 357 阅读

    相关 vue的路由嵌套

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

    红太狼红太狼/ 0 赞/ 367 阅读