앱 실행 중 Vue.js 라우터에 경로 추가

앱 실행 중 Vue.js 라우터에 경로 추가

현재 앱을 만들고 있는데 이 앱에 확장 기능을 추가하고 싶습니다.이러한 확장에는 독자적인 Vue 컴포넌트와 뷰가 있어야 합니다(따라서 라우팅도 필요합니다).앱을 재구축하는 것이 아니라 새로운 뷰와 경로를 동적으로 추가하고 싶습니다.Vue 2에서 그렇게 할 수 있는 좋은 방법이 있나요?

아래에는 이 질문을 좀 더 이해하기 쉽게 하기 위한 파일을 추가했습니다.그router/index.js기본구조가포함되어 있습니다.main.js보통대로 줄서다의 로드 중app.vue새로운 루트를 로드하여 기존 루트에 추가해야 합니다.

라우터

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.discloss.main.discloss.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
// @ is an alias to /src
import TestView from '@/views/Test.vue'

export default {
  name: 'Home',
    components: {},
    created() {

      <add route to router>({
          component: TestView,
          name: "Test",
          path: "/test"
      })
    }
}
</script>

나는 그 문구를 사용했다.<add route to router>루트를 추가하는 방법을 시연합니다.루트가 추가되면 사용자는 다음 명령을 사용하여 새 뷰로 직접 이동할 수 있습니다.<router-link to="/test">Test</router-link>.

어떤 도움이라도 주시면 감사하겠습니다.

실행 시 루트를 추가하기 위해 사용합니다.이 방법에 대한 설명서는 다음과 같습니다.

라우터에 새로운 루트를 추가합니다.루트에 이름이 있고 같은 이름을 가진 기존 루트가 이미 있는 경우 루트는 덮어씁니다.

를 Import 합니다.routerApp.vue로 변환하여 사용합니다.

App.vue

<script>
import router from './router/index.js';
import TestView from '@/views/Test.vue'

export default {
  created() {
    router.addRoute({
      component: TestView,
      name: "Test",
      path: "/test"
    })
  }
}
</script>

언급URL : https://stackoverflow.com/questions/66291541/add-route-to-vue-js-router-while-app-is-running