Does vue routing have a framework other than vue-router?

< H1 > Update 2018-08-21 17:03 < / H1 > Each tab page of the

tab page has its own routing record. (for example, ps: jumps to a-> b-> c in tab1, switches to tab2, and then back to tab1, to keep the jump record c of tab1, and can go back to c-> b tab2, at the same time. Similarly, tab2 has its own jump record, and the two sides do not interfere with each other)

attached video demonstration: https://pan.baidu.com/s/10VK2.

< hr >

there is a requirement that each tab page of the
tab page has its own routing record. (for example, ps: redirects several sub-pages in tab1, switches to tab2, and then switches back to tab1, to keep the jump record of tab1)

friends who have used framework7 know that routing with f7 is easy to implement, because when it is a jump route, it does not replace the original DOM element, but mounts the DOM of the new page, so if you do not use f7, but use vue-router or other (if any), do you have any better suggestions? Thank you

Vue.js javascript
Apr.20,2021

although you have not used routes other than vue-router , you just need to bind tab to routing parameters. You can easily implement
T.vue

with vue-router . 
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="" name="first"></el-tab-pane>
      <el-tab-pane label="" name="second"></el-tab-pane>
      <el-tab-pane label="" name="third"></el-tab-pane>
      <el-tab-pane label="" name="fourth"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    props: {
      active: String
    },
    computed:{
      activeName:{
        get(){
          return this.active || 'first'
        },
        set(v){
          this.$router.push({path: '/t', query: {active : v}})
        }
      }
    }
  }
</script>

router 

const T = () => import ( /* webpackChunkName: "page-message" */ '@/views/message/T.vue');

export default [
  {
    path: '/t',
    props: {
      default: (route) => ({active: route.query.active}),
    },
    components: {
      default: T
    },
    meta: {
      keepAlive: true,
      transition: true,
    }
  },
Don't bind the click event to the

tab, but a link. The small tab under the tab changes the tab address every time you click. When you come back at the click, you automatically switch to the small tab you displayed last time. In this way, your routes should be made into multi-layer nested child routes

Previous: Mysql's question about the design of user account details

Next: Wechat browser return key how to prevent him from returning to the previous interface

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu