如何在Vue.js（typescript）中使用路由

我刚刚用Vue.js启动了一个新项目，很长时间没有使用它，它改变了很多。 试图在我的

src/router/index.ts

中添加路由（如下所示），我转到localhost:8080查看我漂亮的

Helloworld.vue

组件，我看到了我的

Simulator.vue

的内容，即“yoood”

怎么可能呢？因为“/”访问我的应用程序的基本路径是HelloWorld.vue组件，只有一个“HelloWorld”文本

当我试图使用

进入模拟器访问
/simulator
时，我得到了相同的内容

我有点困惑。。。。下面是我的文件

路由器/索引.ts

从“Vue”导入Vue
从“vue路由器”导入VueRouter，{RouteConfig}
从“../views/Home.vue”导入主页
从“@/components/Simulator.vue”导入模拟器；
从“@/components/HelloWorld.vue”导入HelloWorld；
Vue.use（VueRouter）；
常量路由：数组=[
{
路径：“/”，
姓名：'家'，
组件：HelloWorld
},
{
路径：'/simulator'，
名称：'模拟器'，
组件：模拟器
}
]
常量路由器=新的VueRouter({
模式：“历史”，
base:process.env.base\u URL，
路线
})
导出默认路由器

这是我的模拟器。vue：


尤德
从“Vue属性装饰器”导入{Vue}；
导出默认类模拟器扩展Vue{
安装的（）{
console.log（'mounted'）；
}
}

还有我的地狱世界



你好，世界

从“Vue属性装饰器”导入{Component，Prop，Vue}；
@组成部分
导出默认类HelloWorld扩展Vue{
@Prop（）private msg！：字符串；
}
h3{
利润率：40px0；
}
保险商实验室{
列表样式类型：无；
填充：0；
}
李{
显示：内联块；
利润率：0.10px；
}
a{
颜色：#42b983；
}

我的App.vue


从“Vue属性装饰器”导入{Vue}；
导出默认类应用程序扩展Vue{}
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
您缺少路由器视图组件。根据vue路由器

组件是一个功能组件，用于呈现
给定路径的匹配组件

APP.vue


//添加路由器视图组件
错过App.vue

中的

组件是一回事，但是显示

Yood

的行为是可以解释的。我不明白为什么它显示一个比另一个好。如果没有

组件，它不应该显示任何内容。为了测试理论，您是否可以从这一行中删除

@component

装饰器

导出默认类HelloWorld Extendes Vue{

，并将其放在这一行的顶部“导出默认类Simulator Extendes Vue”{`看看会发生什么。检查它是否显示

Hello World

。我添加了它，并从HelloWorld组件中删除了@Component，并将其添加到模拟器。现在在路径

/

上，它显示了良好的组件，但当我单击我的：

转到模拟器

时，它会更改url，但不显示模拟器组件：（组件

@Component

应该在这两个组件上，@Thibault Dumas。这定义了组件。抱歉，在评论中，我不清楚。我希望您删除一个组件并将其更改为另一个，以测试某些内容（不添加

组件）。我想知道为什么它没有显示

`组件。我很乐意提供帮助。你能接受我的回答吗？我也在上面发布了一些东西。我想知道为什么它首先打印了

Yooo

。它不应该没有

路由器视图

组件。