vue-router 不渲染组件，但在 this.$router.push 上更改 url

Posted 2023-02-22

【中文标题】vue-router 不渲染组件，但在 this.$router.push 上更改 url

【英文标题】：vue-router not rendering component, but changing url on this.$router.push

【发布时间】：2020-06-18 03:24:30

【问题描述】：

我试图在按下按钮后重定向到菜单，我已经关注了这个tutorial 但它不起作用，

当按下我的按钮时，url 更新，但保持在同一个视图中，它也将 /#/ 添加到我的 url，而不是遵循我在 routes.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/menu 会变成这个 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')

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;

我的 Home.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>

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>

TraceabilityMenu.vue 在按下按钮 Login 后我尝试渲染的视图

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

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

【问题讨论】：

this.$router.push(path: '/menu'); 因为/menu 是路由器中指定的路径

@MedaiP90 很抱歉，我忘了在这里更改它，仍然无法正常工作

您在“App.vue”中缺少<router-view />，将其替换为<Home/>，然后重试并在“routes.js”中的所有其他条目之后添加 path: "*", redirect: "/"

我知道，我已经看到了对答案的评论......但为时已晚'：D

【参考方案1】：

在你的 main.js 文件上尝试改变

const router = new VueRouter(routes);

到

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

编辑：同时检查你是否在你的根组件 App.vue 中包含了 router-view 标签。

【讨论】：

它没有重定向到我的视图，但它成功更新了 url，不再添加 /#/。

我明白了，您是否在根组件 App.vue 中包含了 router-view 标签？