猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue 路由嵌套

2018-01-15 15:42:09 作者:yxl 次阅读 vue

#### 在开发单页面过程中都会用到路由嵌套
> 比如我们需要在产品页面中 嵌套两个路由,哪个页面需要添加的路由的,就要在哪个页面中添加router-view 和router-link,而且router-link 的路由一定是决定路径
```
<template>
  <div>
      这是商品列表页面
     <div>
          <router-link to="/goods/title">标题页</router-link>
          <router-link to="/goods/image">图片页</router-link>
     </div>
      <div>
          <router-view></router-view>
     </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style>
 
</style>
```
 
> 路由文件  子路由path不要添加 /
```
 routes: [
    {
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList,
      children:[
        {
          path:'title',
          name:'Title',
          component:Title
        },
        {
          path:'image',
          name:'Img',
          component:Image
        },
      ]
    }
  ]
```
 

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: Vue
0

网友评论