请教一下vue-router中两个router的结构写法

现在有一种场景: 一个顶部导航栏navigator和一个侧边栏导航sidebar。navigator中的链接连接到不同的sidebar,sidebar中的链接连接到不同的内容(同一个content区域)。

注:如果大家有过类似的场景,后边的问题就不需要看了(太长),欢迎赐教;如果大家有兴趣想尝试写一下的,可以直接在JSFiddle上尤大的这个页面:http://jsfiddle.net/yyx990803…改写,看能不能完成这个Demo。欢迎来交流这个问题。

我是这样考虑:

  1. navigator为一个router,根据不同path(或参数)传递不同的值(通过$router.params.attr)给sidebar组件。这个传递的值其实就是sidebar的树形标题以及要绑定到to属性上的路径对象。
    (第一步很容易实现,这其实就是一个router的编写。)

  2. 关键是第二步。我把sidebar又看成是一个新router,但是随之而来的问题就是它的VueRouter实例应该在哪里创建呢?因为我从文档中了解的是:在渲染组件的时候,直接 new 一个VueRouter实例出来,然后挂载到组件的实例上去。如下:

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

而我的sidebar组件是通过navigator的router来渲染出来的,那么在哪里可以创建一个与sidebar组件中path相对应的 VueRouter 实例呢?我尝试了下在组件中添加router属性,这个属性的值就是一个 VueRouter 实例(根据传递进来的{routes}创建不同实例),但是结果不像预想中的那样(可能是我path没配置好?原因也许很小)

然后我又去研究了一下文档中的嵌套组件,通过在navigator中的router中添加children属性,把sidebar的{routes}丢给这个children属性,从而达到了想要的伪效果。

重点:一旦我刷新页面,sidebar组件就会消失。造成这种原因我猜是在navigator router的出口中只存在一个$router对象,而sidebar router 同样能够改变这个$router对象的属性,从而造成了刷新页面sidebar消失的原因,因为此时$router对象的path属性指向sidebar中的某个路径

回答:

vue-router 2.x 以後實現了命名路由,可以靠 name 來指定 router-view 顯示特定組件

官方文檔的例子:

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

這邊簡單的實現你說的效果,不知道我有沒有理解錯意思:
JSFiddle

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注