vue路由有沒(méi)有除vue-router以外的框架

更新 2018-08-21 17：03

tab頁(yè)面的每個(gè)tab頁(yè)都有自己?jiǎn)为?dú)的路由記錄。(ps:比如在tab1中跳轉(zhuǎn)a->b->c，切換到tab2，又切換回tab1，能保留tab1的跳轉(zhuǎn)記錄c,同時(shí)后退時(shí)能后退回c->b-a。同理tab2有自己的跳轉(zhuǎn)記錄，雙方互不干涉)

附上視頻演示: https://pan.baidu.com/s/10VK2...

有個(gè)需求是：
tab頁(yè)面的每個(gè)tab頁(yè)都有自己?jiǎn)为?dú)的路由記錄。(ps:比如在tab1中跳轉(zhuǎn)了幾個(gè)子頁(yè)面，切換到tab2，又切換回tab1，能保留tab1的跳轉(zhuǎn)記錄)

使用過(guò)framework7的朋友都知道，用f7的路由實(shí)現(xiàn)起來(lái)會(huì)很簡(jiǎn)單，因?yàn)樗翘D(zhuǎn)路由時(shí)，不替換原來(lái)DOM元素，而是將新頁(yè)面的DOM掛載進(jìn)去，那么如果不用f7，而是用vue-router或其它（如果有的話），各位有什么更好的建議嗎？謝謝

回答

編輯回答

笨笨噠

tab上不要綁定點(diǎn)擊事件，而是是一個(gè)鏈接，tab下面的小小tab每次點(diǎn)擊都是改變tab地址，當(dāng)你在點(diǎn)回來(lái)的時(shí)候，就自動(dòng)切換到上次你顯示的那個(gè)小小tab。這樣你的路由要做成多層嵌套的子路由

2017年5月18日 21:02

編輯回答

晚風(fēng)眠

雖然沒(méi)有用過(guò)vue-router之外其他的路由，但你這個(gè)需求綁定tab到路由參數(shù)上就行了，用vue-router完全可以輕易實(shí)現(xiàn)
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="定時(shí)任務(wù)補(bǔ)償" name="fourth">定時(shí)任務(wù)補(bǔ)償</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,
    }
  },

2018年3月3日 16:51