vuejs3routerlink

simple router link not working, how to go to another vue page in Vuejs 3


i am following some Vue tutorials and testing a projects and my simple link (Let's Play) is not working.no compilation error. compile success. just that the link is not working, url not change also. now i am stuck. please help. sorry if my english bad. this is 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>

This is main.js in src/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')

this is 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

Solution

  • ok i got it work now. steps i do i create new project to auto include router and downgrade to use Vue 2 instead of Vue 3 i have to include <router-view/> this in App.vue