How to navigate to different routes in VueJs rendered in DJango Templates

I have a separate environment for front end which is written in ViewJS. I am trying to merge it with DJango default url. I have build it and able to render the screen in DJango server url by collectstatic and calling it in Django template. But it is loading all the screens of VueJs at once like below image. Even home screen is displaying without logging in which was working fine in isolated environment. Now even the api call is not triggering. How do I resolve this?

enter image description here

main.js

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Home from '@/components/Home'
import Login from '@/components/Login'
Vue.use(VueAxios, axios)
Vue.use(Router)

Vue.config.productionTip = false

const routes = [
  {
    path: '/Home',
    name: 'Home',
    component: Home
  },
  {
    path: '/',
    name: 'Login',
    component: Login
  }
]

const router = new Router({
  routes,
  mode: 'history',
  base: '/test'
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

vue.config.js

const path = require('path');
module.exports = {
  publicPath: '/static/src/vue/dist/', // Should be STATIC_URL + path/to/build
  outputDir: path.resolve(__dirname, '../static/src/vue/dist/'), // Output to a directory in STATICFILES_DIRS
  filenameHashing: false, // Django will hash file names, not webpack
  runtimeCompiler: true, // See: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  devServer: {
    writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
  },
}
Back to Top