和怎么绑定,我这边不管点击哪个点击标签,所有的标签都会渲染那个的路由。
我想要的是一个只对应一个标签(也就是点击某个只会在对应的中渲染)
放一张失败的图片:
求拯救
??????????????????????????????????????????还有代码呢??????????????????????
另外,描述有点懵
添加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