qq_39939840
一个小麻瓜
采纳率0%
2017-09-17 10:02 阅读 4.9k

关于vue路由<router-link>和<router-view>的小问题

和怎么绑定,我这边不管点击哪个点击标签,所有的标签都会渲染那个的路由。
我想要的是一个只对应一个标签(也就是点击某个只会在对应的中渲染)
放一张失败的图片:
图片说明
求拯救

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • HUSHILIN001 mkmin 2017-09-19 01:53

    ??????????????????????????????????????????还有代码呢??????????????????????
    另外,描述有点懵

    点赞 评论 复制链接分享
  • tjj3027 三知之灵 2018-06-07 09:54

    添加name属性
    app.vue:

     <template>
      <div id="app">
        <div id="">
        <img src="./assets/logo.png">
          <shiyan></shiyan>
          <div id="app1">
              <router-link to='RouterTry' class='iclass'>but1</router-link>
               <router-link to='first' class='iclass'>but2</router-link>
               <router-view class='qwer' name="location1"></router-view>
          </div>
          <div id="app2">
            <router-link to='sceond' class='iclass'>but3</router-link>
               <router-link to='three' class='iclass'>but4</router-link>
               <router-view class='qwer' name="location2"></router-view>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import shiyan from '@/components/shiyan.vue'
    export default   {
      name: 'app',
      components:{shiyan}
    
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    .iclass{font-size: 28px; color: green;}
    .qwer{width: 200px; height: 80px; border:  solid 2px black;margin: 0 auto;position: relative;}
    </style>
    

    index.js:

     import Vue from 'vue'
    import Router from 'vue-router'
    import Hello from '@/components/Hello'
    
    import RouterTry from '@/components/RouterTry.vue'
    import first from '@/components/first.vue'
    import sceond from '@/components/sceond.vue'
    import three from '@/components/three.vue'
    
    Vue.use(Router)
    
    var therouter= new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: Hello
        },
        {
          path: '/RouterTry',
          name: 'RouterTry',
          component: {
              location1:RouterTry
          }
        },
        {
          path: '/first',
          name: 'first',
          component: {
              location1:first
          }
        },
        {
          path: '/sceond',
          name: 'sceond',
          component: {
              location2:sceond
          }
        },
        {
          path: '/three',
          name: 'three',
          component: {
              location2:three
          }
        },
      ]
    })
    export default therouter
    
    点赞 评论 复制链接分享

相关推荐