场景类:vue多个router-view路由嵌套
2023-09-11 14:19:37 时间
知识点:路由嵌套
场景:
今天遇到一个需求是这样的,有一个管理系统的列表页,点击某一行进入那一行的详情页面,于是我想这样设计路由。主要是在 App.vue 里套一个 FeedBack ,组件里面只有 <router-view>来进行路由嵌套,再给这个组件里加子组件就好啦。
效果:
代码:
// router.js export default new Router({ mode: 'history', base: '/pfizer-subapp/pc/admin', routes: [ { path: '/feedback', component: Feedback, children: [ { path: '/', redirect: '/feedback/main' }, { path: '/feedback/main', name: 'FedMain', component: FedMain }, { path: '/feedback/detail/:id', name: 'FedDetail', component: FedDetail } ] } ] })
// App.vue <template> <div> <div class="left"> 左边侧导航 </div> <div class="right"> <router-view /> </div> </div> </template>
// feedback.vue <template> <div id="feedback"> <router-view></router-view> </div> </template>
// fed-main.vue <template> <div id="fed-main"> 表格代码 </div> </template>
// fed-detail.vue <template> <div id="fed-detail"> 详情代码 </div> </template>
转: https://blog.csdn.net/weixin_43972437/article/details/100810427
相关文章
- Vue笔记:vue-router
- Vue - 路由守卫使用
- vue 使用路由重复跳转同一页面
- vue 实现动态路由
- [Vue] Code split by route in VueJS
- Vue.js
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- Vue build之后访问dist目录静态资源不加载问题解决
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- 关于Vue 中v-html 失效的原因
- 一文你带快速认识Vue-Router路由
- vue 音频播放切换后还播放原来播放源
- Vue Router路由变化router-view视图不刷新
- Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 153:vue+openlayers 设定修改图层的透明度
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue中使用 class 类样式的方法详情
- vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用