2 qq 39939840 qq_39939840 于 2017.09.17 18:02 提问

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

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

2个回答

HUSHILIN001
HUSHILIN001   2017.09.19 09:53

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

tjj3027
tjj3027   2018.06.07 17: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
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
vue-router的router-view不能渲染;vue2.0中遇到的路由上的一些坑
答案对人有帮助,有参考价值 0 答案没帮助,是错误的答案,答非所问 试一下在App.vue中的mounted钩子中加载默认route [rootVue].$router.push('/foo'); [rootVue]必须替换成指向你的Vue实例 1月5日回答 评论  编辑 答案对人有帮助,有参考价值 0 答案没帮助,是错误
Vue 2 中router-link 的应用不显示对应的router-view内容
本来是想做类似于导航页面的东西: 看到页面间的导航router-link 的用法,一开始一直比较迷糊,用了 5个页面,1 首页,2/3/4/5是导航的内容页面,在页面1中,使用router-link 完成了导航,然后就一直在坑里,为什么默认的首页不展示,然后想在页面1 里面router-view展示2/3/4/5 页面的内容,但是一直不能展示,后来才发现,原来根本就不需要页面1,直接在页面2/3
router-link 地址可以改变,但是router-view不渲染
1、看到这个标题百度,很多出现的问题都是单词拼写错误,比如export default new Router( { routes: [ { path:'\', component:home } ] })很多强调的就是上面的routes不能有错误,因为很多人写的时候哦会写成routers2、我的错误是因为当时用vue-cl
vue基础动态路由,嵌套路由router-link切换
index.js import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import GoodsList from '../views/GoodsList' import Title from '@/views/Title' import Im
vue2路由view-router配置(懒加载)
vue2路由view-router配置demo,按需加载路由模块哦
vue2.0中router-view不能渲染
路由js文件页面js文件页面vue文件一直看了很久,路由都已经配置好了,也不报出错误,页面就是什么都不显示,一片空白原来是创建new Router时候routes写错了,routes写错会导致组件都没有传进去vue-router开发文档...
vue router学习——动态路由和嵌套路由
vue router学习——动态路由和嵌套路由 本文主要参考: https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行。如果还么有搭建可以参考文章: http://blog.csdn.net/wild46cat/article/details/7636022
router基本使用
1、vue2中的路由定义层:router-linkto="/goods">商品router-link> 这里用to指向路径表现层 1.1、keep-alive>如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令 keep-alive>router-view:seller="seller">contentrouter-view>ke
Vue--router-->>项目多路由嵌套--常用
html> html lang="en"> head> meta charset="UTF-8"> title>vue-routertitle> link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> script src="js/vue.j
Vue-router2.0基础实践
1)基础用法: Hello App! 默认会被渲染成一个 `` 标签 --> Go to Foo Go to Bar this is foo! this is bar! // 1. 定义(路由)组件。 // 可