zoukankan      html  css  js  c++  java
  • 场景类:vue多个router-view路由嵌套

    知识点:路由嵌套

    场景:
    今天遇到一个需求是这样的,有一个管理系统的列表页,点击某一行进入那一行的详情页面,于是我想这样设计路由。主要是在 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

  • 相关阅读:
    setMasksToBounds
    CSRF跨站
    ORM: object relationship mapping
    orm查询
    图书管理系统(增删改)
    django图书管理半成品(MySQL)
    模板继承(练习测试)
    模板层(template)
    django命令(笔记,自己看的)
    django(注册→登录→主页)增强版
  • 原文地址:https://www.cnblogs.com/fps2tao/p/14878511.html
Copyright © 2011-2022 走看看