vue命名视图问题

X1aoHei
  • 1
新手上路,请多包涵

问题描述

请问一个组件内部引用了命名视图,在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文件的内容

回复
阅读 1.8k
3 个回答
✓ 已被采纳

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

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路由下显示testHelloWorld组件(他俩是兄弟),在/test/testChild路由下testChild会在test里(他俩是父子)

进入到你所说的路径首先匹配的是根路径,显示的将会是 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里面

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