vue-router中子路由内容不显示

项目目录：

首先看下，我在User.vue下面挂载两个子组件：Posts.vue和Profile.vue。

两个子组件的代下如下：

Posts.vue代码：

// Posts.vue里面的内容<template><div><h2>Posts页面</h2></div>
</template><script>export default {}
</script><style lang="scss" scoped></style>

Profile.vue代码：

// Profile.vue里面的内容<template><div><h2>Profile页面</h2></div>
</template><script>export default {}
</script><style lang="scss" scoped></style>

两个子组件挂载到index.js里面：

index.js代码如下：

// index.js里面的内容import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// import Posts from '@/views/Posts.vue'const routes = [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')},{path:'/user',name:'user',component:()=>import('@/views/User.vue'),// props:true,children:[{path:'posts',component:()=>import('@/views/Posts')},{path:'/profile',component:()=>import('@/views/Profile')}]},
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

下图是挂载的信息：

可以看出，两个path不一样！一个有/，另外一个没有。

父组件App.vue代码如下：

// App.vue里面的内容<template><nav><router-link to="/">首页</router-link> |<router-link to="/about">关于</router-link> |<router-link to='/user'>User</router-link>  |<router-link to='user/posts'>user/posts</router-link> |<router-link to='user/profile'>user/profile</router-link></nav><router-view/><!-- <router-view></router-view> -->
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

运行结果如下：

上图可以看出，带/的子组件，页面显示出来了，没有带/的页面没有显示出来。

vue-router中子路由内容不显示相关推荐

Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
Vue Router 命名路由、（嵌套）命名视图
命名路由在Vue Router中除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
vue + router 权限管理不同角色显示不同路由
思路: login页面登录时加上角色的标记,存储到本地缓存(localstorage) 路由js文件,meta属性加个是否可见(visiable true或false) home 基本导航栏页面逻辑 ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...

vue-router中子路由内容不显示

vue-router中子路由内容不显示相关推荐

最新文章

热门文章