组件名称未显示在 url

Posted 2023-02-22

【中文标题】组件名称未显示在 url

【英文标题】：component name not showing up in url

【发布时间】：2021-05-29 23:08:14

【问题描述】：

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

演示：

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

但是，当我这样做时，它工作正常并且功能在那里。但是，网址显示的是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")
    
  ]
);

【问题讨论】：

home 应该在基于您的 path 路由配置的 URL 中。你能链接到复制品吗？

【参考方案1】：

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

当我在路由参数中传递的变量存在时，地址栏显示路径，但是当我在路由参数中传递的变量为“未定义”时，导航仍然改变，但地址栏不显示路径.

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

这是我的代码。

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

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

Vue.use(VueRouter)

import Home from '@/components/***/router-props/Home'
import RouterProps from '@/components/***/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>