vueJS路由器:从组件数据更新页面标题
vueJS路由器:从组件数据更新页面标题
提问于 2020-06-19 21:10:42
我正在运行安装了vue路由器的VueJS，除了一个细节之外，标题目前工作正常。
在下面的示例中，所有页面都工作正常，但是如果我使用/user/:user_id路由显示特定的用户，我不知道如何在标题中显示用户名，例如：'Cool Page - [USER_NAME]'。
在组件使用:user_id从Vuex中检索该用户数据之后，将在组件中从数据库中获取此用户名。
我该怎么做呢？
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {'title': "Cool Page",
'metaTags': metaTags},
},
{
path: '/users',
name: 'users',
component: Users,
meta: {'title': "CoolPage - Users",
metaTags: metaTags},
},
{
path: '/user/:user_id',
name: 'user',
component: User,
meta: {'title': "Cool Page - Some User",
metaTags: metaTags },
...const DEFAULT_TITLE = 'Coolpage.com';
router.afterEach((to, from) => {
document.title = to.meta.title || DEFAULT_TITLE;
});在我的组件中:我有一个使用vuex getter的计算属性，以及一个用于prop的数据变量，如下所示：
computed: {
...mapGetters(['allUsers','getUserById', 'getUserStoreStatus']),
user: function () {
var u = this.getUserById(this.user_id);
if(u){ return u; }
else{ return {}; }
},
},
data(){
return {
user_id: this.$route.params.user_id,
}
}
...回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-19 22:26:22
我会简单地import你的商店，你在那里获得用户信息，如下所示：
import store from '../store';然后你会这样做(我没有看到你的商店代码，所以你必须修改这一点以满足你的需要)：
const DEFAULT_TITLE = 'Coolpage.com';
router.afterEach((to, from) => {
const userInfo = store.getters['getUserInfo'];
// This could be cleaned up a bit, but you get the point...
document.title = to.name === 'user' ?
`Cool Page - ${userInfo.username}` :
to.meta.title || DEFAULT_TITLE;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62471051
复制相关文章
相似问题
腾讯云开发者
