Vue 嵌套路由

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

## 第一步：News.vue ##

<template>
      <div>
        <h2>News</h2>
        <br>
        <router-link to="/details">Details</router-link>
        <router-view></router-view>   
      </div>
    </template>
    <style scoped> div{ background-color: aqua; } </style>

## 第二步：Details.vue ##

<template>
      <div>
        <h2>Details</h2>
      </div>
    </template>
    <style scoped> div{ text-align: center; font-size: 38px; color: sienna; } </style>

## 第三步：router目录下的index.js ##

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 将Vue挂载到Router中，接下来就可以使用Router了
    Vue.use(VueRouter)
    
    const routes = [{ 
      path: '/news',
      component: () => import('../views/News.vue'), // 懒加载
      children: [{ 
        path: '/details',
        component: () => import('../views/Details') // 懒加载
      }]
    }]
    
    const router = new VueRouter({ 
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

效果：

*  News页面：  
    ![在这里插入图片描述][20201120190437532.png_pic_center]
 *  单击Details

![在这里插入图片描述][20201120190443883.png_pic_center]

[20201120190437532.png_pic_center]: /images/20221120/948a736eeacd46cb80333d3c548f8948.png
[20201120190443883.png_pic_center]: https://img-blog.csdnimg.cn/20201120190443883.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，564人围观）

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

相关阅读

相关 Vue 嵌套路由

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

桃扇骨/ 2023年06月05日 11:19/ 0 赞/ 91 阅读

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

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

野性酷女/ 2022年12月25日 15:56/ 0 赞/ 338 阅读

相关 Vue 嵌套路由

第一步：News.vue <template> <div> <h2>News</h2> <br> <r

逃离我推掉我的手/ 2022年12月22日 15:26/ 0 赞/ 565 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 490 阅读

相关 vue的路由嵌套

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

红太狼/ 2022年05月24日 23:42/ 0 赞/ 356 阅读

相关 vue路由嵌套，配置children嵌套路由

嵌套路由就是路由里面嵌套他的子路由，可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套 //mi

r囧r小猫/ 2022年05月20日 05:00/ 0 赞/ 454 阅读

相关 Vue嵌套路由

1. 嵌套路由就是路由下还有路由，即子路由。写法：在router.js中对应的父路由的children属性下写子路由 import Vue from 'vue'

╰+攻爆jí腚メ/ 2022年03月01日 01:10/ 0 赞/ 425 阅读

相关 Vue路由（嵌套路由）的使用

1、vue-router介绍 vue-router是Vue.js的路由插件。适合用于构建单页面应用，基于路由和组件；路由用于设定访问路径，将路径和组件映射起来。路径

￡神魔★判官ぃ/ 2021年09月20日 09:08/ 0 赞/ 670 阅读

相关 vue2路由--嵌套路由

一般应用中的路由方式不会像上述例子那么简单，往往会出现二级导航这种情况。这时就需要使用嵌套路由这种写法。 <%@ taglib prefix="c" uri="htt

阳光穿透心脏的1/2处/ 2021年09月14日 15:10/ 0 赞/ 673 阅读

相关 vue 路由嵌套(二级路由)

路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法。嵌套路由的关键字childr

青旅半醒/ 2021年07月27日 01:47/ 0 赞/ 919 阅读