vue.js - 请教一下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

这篇关于vue.js - 请教一下vue-router中两个router的结构写法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！