问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue命名视图问题

头像
X1aoHei
    12718
    新手上路，请多包涵

    问题描述

    请问一个组件内部引用了命名视图，在index.js中定义了这个命名视图的router，为什么命名视图显示不出来呢？
    浏览器访问的是http://localhost:8080/#/test

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）
    index.js

    import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test1'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      components:{
        default:test,
        hello:HelloWorld
      }
    }
  ]
})

    test1.vue

    <template>
  <div>
    123
    <router-view name="hello"></router-view>
  </div>
</template>

<script>
</script>

<style>
</style>

    你期待的结果是什么？实际看到的错误信息又是什么？

    期待的结果是页面显示123和HelloWorld.vue文件的内容

    vue.jsvue-router
    阅读 3.7k
    3 个回答
    得票最新
    头像
    安昊
      600620
      ✓ 已被采纳

      在test1里写的router-view展示的是test1的子路由，你并没有给test1配置children
      你配置的是在/test这个路由下有两个组件test和HelloWorld，他俩要一起展示，应该写一起
      你可以这么写尝试一下，梳理一下关系

      App.vue

      <template>
  <div id="app">
    <router-view></router-view>
    <router-view name="hello"></router-view>
  </div>
</template>

      router/index.js

      import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test1'
// 这个是test子路由的组件
import testChild from '@/components/testChild'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      components:{
        default:test,
        hello:HelloWorld
      },
      children: [
        {
          path: 'testChild',
          component: testChild
        }
      ]
    }
  ]
})

      test1.vue

      <template>
  <div>
    我是test
    <router-view></router-view>
  </div>
</template>

      testChild.vue

      <template>
  <b>
    我是testChild
  </b>
</template>

      这样在/根路由就显示HelloWorld组件，在/test路由下显示test和HelloWorld组件（他俩是兄弟），在/test/testChild路由下testChild会在test里（他俩是父子）

      头像
      Kisstar
        54035

        进入到你所说的路径首先匹配的是根路径，显示的将会是 HelloWorld.vue 组件中的内容，可以贴一下该组件中有没有提供对应的路由出口。

        发现上面不是嵌套路由，那么按照需求要显示的话，需要在根模板中提供路由出口。

        <body>
    <div id="app">
        <!-- 
            通过 name 属性与路由规则中的 components 对象中的属性名进行匹配，并渲染匹配项指定的组件
            没有指定 name 属性，默认匹配 default 字段指定的组件
        -->
        <router-view></router-view>
        <router-view name="hello"></router-view>
    </div>
    <!-- 引入 vue -->
    <script src="./js/vue.min.js"></script>
    <!-- 引入路由模块 -->
    <script src="./js/vue-router.min.js"></script>
    <script>
        const HelloWorld = {
            template: `<div><p>我是 HelloWorld 组件中的文本内容。</p></div>`
        };
        const Test = {
            template: `<div><p>我是 Test 组件中的文本内容。</p></div>`
        };
        const router = new VueRouter({
            routes: [{
                path: '/',
                component: HelloWorld
            }, {
                path: '/test',
                components: {
                    default: Test,
                    hello: HelloWorld
                }
            }]
        });
        new Vue({
            el: '#app',
            router
        });
    </script>
</body>
        头像
        静昕妈妈芦培培
          1
          新手上路，请多包涵

          你跟我犯了同样的错误，都为此折腾好久，最后我终于知道原因了

          <router-view name="hello"></router-view>

          必须写在app.vue里面

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题