Как переходить к различным маршрутам в VueJs, визуализированных в шаблонах DJango

У меня есть отдельная среда для front end, которая написана на ViewJS. Я пытаюсь объединить его с DJango по умолчанию. Я собрал его и смог отобразить экран в DJango server url с помощью collectstatic и вызова его в Django template. Но он загружает все экраны VueJs одновременно, как показано ниже. Даже главный экран отображается без входа в систему, что прекрасно работало в изолированной среде. Теперь даже вызов api не срабатывает. Как мне решить эту проблему?

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
  },
}
Вернуться на верх