vue-properties는 구성 요소를 렌더링하는 것이 아니라 이 구성 요소의 URL을 변경하는 것이다.1달러짜리밀다

vue-properties는 구성 요소를 렌더링하는 것이 아니라 이 구성 요소의 URL을 변경하는 것이다.1달러짜리밀다

버튼을 누른 후 메뉴로 리디렉션하려고 하는데, 이 튜토리얼을 따라갔지만 작동하지 않는다.

내 버튼을 누르면 URL이 업데이트되지만 동일한 보기에 유지되는 경우, 경로.js에서 코드화한 내용을 따르는 대신 /#/를 내 URL에 추가함

콘솔에서 다음 오류가 발생함

 Uncaught (in promise) 
NavigationDuplicated {
_name: "NavigationDuplicated", 
name: "NavigationDuplicated", 
message: "Navigating to current location ("/menu") is not allowed", stack:

버튼을 누르면 url이 http://localhost:8080/#/menu 대신 http://localhost:8080/menu로 바뀐다.

수동으로 url http://localhost:8080/menu가 이 http://localhost:8080/menu/#/로 바뀌는 경우

제발 도와줘, 난 부에즈는 처음이야.

이것이 내 프로젝트의 구조다.

main.js.

import Vue from 'vue'
import App from './App.vue'
import VueRouter  from 'vue-router'
import vuetify from './plugins/vuetify'
import routes from './routes'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.config.productionTip = false
Vue.use(VueRouter)
const router = new VueRouter({routes});

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

앱뷰

<template>
  <div id="app">
    <Home/>
  </div>
</template>

<script>
import Home from './views/Home.vue'
import 'material-design-icons-iconfont/dist/material-design-icons.css';

export default {
  name: 'App',

  components: {
    Home
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

내 항로js

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

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home, name: 'home' },
  { path: '/menu', component: TraceabilityMenu, name: 'traceability-menu' },  
  {path: '/about', component: About, name: 'about'}
]
export default routes;

나의 집.로드할 첫 번째 보기인 vue(App.vue에 의해)

<template>
  <v-app id="inspire">
    <v-app-bar app color="indigo" dark>
      <v-toolbar-title>Project Traceability</v-toolbar-title>
      <template>
        <v-spacer />
          <v-btn color="primary" @click="showPopupLogin()" :to="{ name: 'login'}" >Ingresar</v-btn>
      </template>

    </v-app-bar>
    <PopupLogin v-show="showLogin"/>
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col class="text-center">
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer
      color="indigo"
      app
    >
    </v-footer>
  </v-app>
</template>

<script>
import PopupLogin from '@/components/PopupLogin.vue';
  export default {
    props: {
      source: String,
    },
    data: () => ({
      showLogin     : false
    }),
    components: {
        PopupLogin,
    },
    methods: {
      showPopupLogin() {
        this.showLogin = !this.showLogin
      }
    }
  }
</script>

구성 요소 팝업로그인

<template>
  <v-app id="inspire">
    <v-content>
      <v-container class="fill-height" fluid>
        <v-row align="center" justify="center">
          <v-col cols="12" sm="8" md="4">
            <v-card class="elevation-12">
              <v-toolbar color="primary" dark flat >
                <v-toolbar-title>Iniciar sesión</v-toolbar-title>
                <v-spacer />
                <v-tooltip bottom>
                </v-tooltip>
              </v-toolbar>
              <v-card-text>
                <!-- Formulario de login-->
                <v-form v-model="validForm" ref="formLogin">
                  <v-text-field 
                    required 
                    label="Usuario" 
                    :rules="nameRules" 
                    name="login" 
                    type="text" 
                    v-model="existingUser.username"/>
                  <v-text-field 
                    required 
                    id="password" 
                    prepend-icon="lock" 
                    label="Contraseña" 
                    name="password" 
                    type="password"
                    v-model="existingUser.password"/>
                </v-form>
              </v-card-text>

              <v-card-actions>
                <v-spacer/>
                <v-btn color="primary" @click="loginUser()">Ingresar</v-btn>
              </v-card-actions>
            </v-card>
          </v-col> 
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>


<script>
  export default {
    name: 'PopupLogin',
    props: {
      source: String
    },
    data: () => ({
      validForm     : false,
      //objetos
      existingUser  : {}
    }),
    methods: {
      //Funcion que llamara al servicio de login en backend
      loginUser() {
        this.$router.push({path: '/menu'});
      }
    }
  }
</script>

TraceabilityMenu.vue 로그인 버튼을 누른 후 렌더링하려는 보기

<template>
  <v-app id="inspire">
   <div>RENDER ME!</div>
  </v-app>
</template>

<script>
  export default {
    props: {
      source: String,
    },
    data: () => ({
      drawer: null,
    }),
  }
</script>

main.js 파일에서 변경해 보십시오.

const router = new VueRouter({routes});

로

const router = new VueRouter({routes, mode: 'history'});

편집: 루트 구성 요소 App.vue에 라우터 보기 태그를 포함했는지도 확인하십시오.

참조URL: https://stackoverflow.com/questions/60546326/vue-router-not-rendering-component-but-changing-url-on-this-router-push