typescript - 如何在 Vue.js(打字稿)中使用路由
问题描述
我刚用Vue.js开始了一个新项目,好久没用了,变化很大。试图在我的src/router/index.ts
(如下所示)中添加一条路线,我去 localhost:8080 看到我漂亮Helloworld.vue
的组件,我看到我的内容Simulator.vue
是“Yooood”。
怎么可能?由于我的应用程序通过“/”访问的基本路径是 HelloWorld.vue 组件,只有一个“Hello World”文本......
当我尝试/simulator
使用 a访问时,<router-link to="/simulator">Go to Simulator</router-link>
我得到了相同的内容......
我有点困惑....这是我下面的文件。
路由器/index.ts
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import Simulator from "@/components/Simulator.vue";
import HelloWorld from "@/components/HelloWorld.vue";
Vue.use(VueRouter);
const routes: Array<RouteConfig> = [
{
path: '/',
name: 'Home',
component: HelloWorld
},
{
path: '/simulator',
name: 'Simulator',
component: Simulator
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
所以这是我的 Simulator.vue :
<template>
<div class="hello">
Yooood
</div>
</template>
<script lang="ts">
import {Vue} from "vue-property-decorator";
export default class Simulator extends Vue {
mounted() {
console.log('mounted');
}
}
</script>
<style scoped>
</style>
还有我的 HelloWorld.vue
<template>
<p>
Hello World
</p>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
我的应用程序.vue
<template>
<div id="app">
</div>
</template>
<script lang="ts">
import {Vue } from 'vue-property-decorator';
export default class App extends Vue {}
</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;
}
</style>
解决方案
您缺少路由器视图组件。根据 vue-router文档,
该
<router-view>
组件是一个功能组件,它为给定路径渲染匹配的组件
APP.vue
<template>
<div id="app">
<router-view></router-view> // add router view component
</div>
</template>
推荐阅读
- html - CSS Flexbox 布局 - 3 列和 2 列互换
- python - 从 MongoDB 获取数据后,如何在将数据推送到 Kafka 的同时加快 Kafka 的速度?
- java - Log4j2 creating new file with distinct filename each time the JVM starts
- java - antlr4 switch 语句语法到访问者
- java - Why 8th decimal digit is recognized in 16_711_711f == 16_711_712f, shouldn't float have only 7 decimal digits precision?
- javascript - 用于金融应用程序的 Influxdb
- javascript - Vue CLI 3 sass-resources-loader - Options.loaders undefined
- vba - How can one see the size of the compiled subroutine in VBA Excel 2016?
- react-native - react-native run-android 在mac上没有sudo就给出错误
- python - 选择列时计算 Pandas 数据框子集中的行数