当 Vue 组件在视口中时，如何添加主体 class？
[英]How do I add a body class when a Vue Component is in the viewport?
问题描述
Is there a way that I can add a class, maybe to the body tag, when a user clicks on a router link.
当用户单击路由器链接时，有没有办法可以将 class 添加到正文标签中。 Then remove this class again when they leave the view?然后当他们离开视图时再次删除这个 class ？
The reason being is that for the app shell I have a fixed header & footer.原因是对于应用程序 shell 我有一个固定的 header 和页脚。 All views (Vue Components) feature these two elements as part of the design, except just one page where these two elements need removing.所有视图（Vue 组件）都将这两个元素作为设计的一部分，除了需要删除这两个元素的一页。
I figured that if I could add a body class dynamically, I could then add the below CSS.我想如果我可以动态添加一个主体 class，我可以添加下面的 CSS。 Can this be done?这可以做到吗？
.minimal-shell .header,
.minimal-shell .footer{
display:none;
}
2 个解决方案
解决方案1
0 2019-09-22 14:03:11
I'm on mobile so I apologize for formatting.我在手机上，所以我为格式化道歉。 You can just provide a class based on a prop.您可以仅提供基于道具的 class 。
<body class="[isInView ? 'view-class' : '']">
<Linker @click="goToView" />
</body>
Model: Model：
data: function() {
return {
isInView: false;
}
},
methods: {
... ,
goToView() {
this.isInView = true;
this.$router.push({ path: 'view' });
}
}
解决方案2
0 2019-09-22 19:50:53
There are several ways to do what you are asking, as you can imagine.正如您可以想象的那样，有几种方法可以满足您的要求。
1. Vue-Router Hooks 1. Vue-Router Hooks
When you navigate to route components (components you render inside <router-view> ) these components will have special router lifecycle-hooks you can use:当您导航到路由组件（您在<router-view>渲染的组件）时，这些组件将具有特殊的路由器生命周期挂钩，您可以使用：
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
next(vm => vm.setData(err, post))
})
},
// when route changes and this component is already rendered,
// the logic will be slightly different.
beforeRouteUpdate (to, from, next) {
this.post = null
getPost(to.params.id, (err, post) => {
this.setData(err, post)
next()
})
},
More about this in the official documentation更多关于这个的官方文档
2. Vue-Router navigation guards 2. Vue-Router 导航守卫
You could also use navigation guards - a function that is called at a certain point during a route navigation:您还可以使用导航守卫 - 在路线导航期间的某个时间点调用的 function：
router.beforeEach((to, from, next) => {
// ...
})
More about this also in the official documentation更多关于这个也在官方文档中
3. Explicit, component-specific action 3. 明确的、特定于组件的操作
Of course, you can also trigger all changes you want in the components itself.当然，您也可以在组件本身中触发您想要的所有更改。 Either in the components you navigate to - or a root component for your <router-view> .在您导航到的组件中 - 或您的<router-view>的根组件中。 My first idea would be to handle the logic in a watcher :我的第一个想法是在watcher中处理逻辑：
watch: {
$route: {
immediate: true, // also trigger handler on initial value
handler(newRoute) {
if (newRoute.params.myParam === 'my-param') {
document.body.classList.add('my-class');
}
}
}
}
I personally would watch the route in a root layout-component as I like to keep naviation guards for business logic / authentication (not style).我个人会在根布局组件中观察route ，因为我喜欢为业务逻辑/身份验证（而不是样式）保留导航守卫。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.