url 中未显示组件名称

Question

我目前正在构建一个 vue/node 应用程序。在我的 Login.vue 页面中，我使用 router.push 在身份验证完成后转到主页。

示范：

router.push({name: 'home', params: {data: this.var}});

但是，当我这样做时，它工作正常并且功能在那里。但是，url 显示 http://localhost:6969:/ 而不是 http://localhost:6969:/home。

我该怎么做？

这是我的路由器：

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/login",
      name: "login",
      component: () => import("./components/Login")
    },
    {
      path: "/home/:data",
      name: "home",
      component: () => import("./components/Home")
    }
  ]
});

Answer 1

我创建了一个基本的示例应用程序并且能够复制您所看到的行为。

当我传入route params的变量存在时，地址栏显示路径，但当我传入route params的变量为'undefined'时，导航仍然改变，但地址栏显示不显示路径。

不确定这是否是导致您出现问题的原因，但我建议确认您的“{ data: this.var }”值是否已定义。

这是我的代码。

路由器：注意：通常我会在我的路线对象中包含 'props: true'，但为了匹配您的示例而将其保留。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '@/components/Whosebug/router-props/Home'
import RouterProps from '@/components/Whosebug/router-props/RouterProps'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/routerprops/:id',
    name: 'routerProps',
    component: RouterProps,
    // props: true
  }
]

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

Home.vue（不是我测试中带参数的路由）：

注意：请参阅方法 'goRouterProps' 了解两种情况。

<template>
  <div class="home">
    <h3>Home.vue</h3>
    <div class="row">
      <div class="col-md-3">
        <router-link class="btn btn-primary" :to="{ name: 'routerProps', params: { id: this.id }}">RouterProps via link</router-link>
      </div>
      <div class="col-md-3">
        <button class="btn btn-primary" type="button" @click="goRouterProps">RouteProps via push</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: 1
      }
    },
    methods: {
      goRouterProps() {
        this.$router.push({ name: 'routerProps', params: { id: undefined }})
        //this.$router.push({ name: 'routerProps', params: { id: this.id }})
      }
    }
  }
</script>

和 RouterProps.vue，导航到：

<template>
  <div class="router-props">
    <h3>RouterProps.vue</h3>
    <div class="row">
      <div class="col-md-6">
        <router-link class="btn btn-primary" :to="{ name: 'home'}">Home</router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    // props: {
    //   id: {
    //     type: Number,
    //     required: true
    //   }
    // }
  }
</script>

url 中未显示组件名称

component name not showing up in url

router

components

node.js

vue.js

vue-router