组件名称未显示在 url
Posted
技术标签:
【中文标题】组件名称未显示在 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>
【讨论】:
以上是关于组件名称未显示在 url的主要内容,如果未能解决你的问题,请参考以下文章