当前位置：文江博客话题详情

vue命名视图问题

发布于 2022-09-11 21:51:01 字数 1126 浏览 12 评论 0

问题描述

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

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单身情人 2022-09-18 21:51:01

在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里（他俩是父子）

回复收藏 0

叫嚣ゝ 2022-09-18 21:51:01

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

回复收藏 0

小镇女孩 2022-09-18 21:51:01

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

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

必须写在app.vue里面

回复收藏 0

~没有更多了~

关于作者

不打扰别人

暂无简介

0 文章

0 评论

25 人气

关注发私信

苦中寻乐

文章 0 评论 0

关注

lueluelue

文章 0 评论 0

关注

嗼ふ静

文章 0 评论 0

关注

王权女流氓

文章 0 评论 0

关注

与花如笺

文章 0 评论 0

关注

残酷

文章 0 评论 0

友情链接

文江博客

vue命名视图问题

问题描述

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

相关代码

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

苦中寻乐

lueluelue

嗼ふ静

王权女流氓

与花如笺

残酷

友情链接

vue命名视图问题

问题描述

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

相关代码

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

苦中寻乐

lueluelue

嗼ふ静

王权女流氓

与花如笺

残酷

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。