Я пытаюсь перенаправить в меню после нажатия кнопки, я следовал этому учебнику , но он не работает,
При нажатии моей кнопки URL обновляется, но остается в то же самое, он также добавляет / # / к моему URL вместо того, чтобы следовать тому, что я кодировал в маршрутах. js
Я получаю следующую ошибку на консоли
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 / меню превращается в это http://localhost: 8080 / menu / # /
Пожалуйста, помогите, я довольно новичок в vuejs
Это структура моего проекта
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')
Приложение. vue
<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, который является первым видом на нагрузка (от приложения. 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>
Компонент PopupLogin
<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>
TraceabilityM enu. vue вид, который я пытаюсь отобразить после нажатия кнопки Войти
<template>
<v-app id="inspire">
<div>RENDER ME!</div>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>