vue路由有没有除vue-router以外的框架

Question

更新 2018-08-21 17：03

tab页面的每个tab页都有自己单独的路由记录。(ps:比如在tab1中跳转a->b->c，切换到tab2，又切换回tab1，能保留tab1的跳转记录c,同时后退时能后退回c->b-a。 同理tab2有自己的跳转记录，双方互不干涉)

附上视频演示: https://pan.baidu.com/s/10VK2...

---

有个需求是：
tab页面的每个tab页都有自己单独的路由记录。(ps:比如在tab1中跳转了几个子页面，切换到tab2，又切换回tab1，能保留tab1的跳转记录)

使用过framework7的朋友都知道，用f7的路由实现起来会很简单，因为它是跳转路由时，不替换原来DOM元素，而是将新页面的DOM挂载进去，那么如果不用f7，而是用vue-router或其它（如果有的话），各位有什么更好的建议吗？谢谢

Answer 1

虽然没有用过vue-router之外其他的路由，但你这个需求绑定tab到路由参数上就行了，用vue-router完全可以轻易实现
T.vue

<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,
    }
  },

Answer 2

tab上不要绑定点击事件，而是是一个链接，tab下面的小小tab每次点击都是改变tab地址，当你在点回来的时候，就自动切换到上次你显示的那个小小tab。这样你的路由要做成多层嵌套的子路由