vue <router-view />使用

标签：bsp   foo   访问   asc   页面   匹配   map   路径   成功   

在APP.vue主组件中，内容上就只有<router-view></router-view>，然后在其他页面也有<router-view></router-view>，可以理解为：

一层路径(/xxx)对应一个router-view

比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数)

• 那/a对应的就是App.vue中的router-view，/a进入a.vue中
• 那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue中

<div id="app">
  <router-view />
</div>

 当访问/foo时，router-view就被Foo组件代替了

router.map({
  ‘/foo‘:{
    component: Foo
  }
})

嵌套路由

组件中依然可以使用<router-view />,要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: ‘/foo/:id‘, component: Foo,
      children: [
        {
          // 当 /foo/:id/profile 匹配成功，
          // FooProfile 会被渲染在 Foo的 <router-view> 中
          path: ‘profile‘,
          component: FooProfile
        },
        {
          // 当 /foo/:id/posts 匹配成功
          // FooPosts 会被渲染在 Foo的 <router-view> 中
          path: ‘posts‘,
          component: FooPosts
        }
      ]
    }
  ]
})

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

eg:https://router.vuejs.org/zh/guide/essentials/named-routes.html

vue <router-view />使用

标签：bsp   foo   访问   asc   页面   匹配   map   路径   成功   

原文地址：https://www.cnblogs.com/wuhuaguo/p/10374005.html