Question

如何在组件中显示路由器名称？示例：

const routes = [
{ path: '/documents', component: Documents, name:"Documents"  ,props:true},
{ path: '/queries', component: Queries, name:"Queries", props:true}
]

我想在组件中显示 name 属性作为标题。这可能吗？怎么样？

Answer 1

props:true会将路径参数转换为属性：

{ path: '/documents/:name', component: Documents, name:"Documents", props:true},

您可以使用对象代替true，然后发送字符串。

{ path: '/documents', component: Documents, name:"Documents", props:{ name:'Documents'}},

在您的组件中，注册属性

props: { name:String }

然后在这样的模板中使用它：

<div>{{name}}</div>

您还可以使用组件$ route对象引用路由名称

<div>{{$route.name}}</div>

Answer 2

要指定组件的标题，可以使用路由器的meta属性Link

const routes = [
{ 
  path: '/documents', 
  component: Documents,
  name:"Documents" ,
  props:true,
  meta: {
    title: 'Documents'
  }
},
{ 
  path: '/queries',
  component: Queries,
  name:"Queries",
  props:true,
  meta: {
    title: 'Queries'
  }
 }
]

在main.js中，

import router from '@/routes'
router.beforeEach((to, from, next) => {
  document.title = `Currently at - ${to.meta.title}`
  next()
})

Vuejs在组件

2 个答案: