简单的路由器链接不起作用，如何在 Vuejs 3 中转到另一个 vue 页面

问题描述

我正在学习一些 Vue 教程并测试一个项目，但我的简单链接 (Let's Play) 不起作用。没有编译错误。编译成功。只是链接不起作用，网址也不会改变。现在我被困住了。请帮忙。对不起，如果我的英语不好。这是 src/views/LandingPage.vue

<template>
<div>
    <h1>Welcome </h1>
  
    ကြိုဆိုပါတယ် {{ user['first_name'] }} {{ user['last_name'] }} 
    <br>
     <router-link to="/choose-topic">Lets Play</router-link>
</div>
<router-view/>
</template>


<script>

这是 src/main.js 中的 main.js

import LandingPage from './views/LandingPage.vue'
import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import router from 'vue-router'


createApp(LandingPage).use(VueAxios,axios,router).mount('#app')

这是 src/router/index.js

import {createRouter,createWebHistory} from 'vue-router'

import Choosetopic from '../views/Choosetopic.vue'

const routes = [

    
    {
        path: '/choose-topic',name: 'Choosetopic',component: Choosetopic
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),routes
})

export default router

解决方法

好的，我现在开始工作了。我做的步骤我创建新项目以自动包含路由器并降级以使用 Vue 2 而不是 Vue 3 我必须在 App.vue 中包含 <router-view/> 这个

routerlink vuejs3