Javascript 路由名称上的VueJS条件类绑定？

我有一些文字，我正试图改变基于路线名称的样式。我已经设置了2个路线名称，广告和网站，并设置了一个观察者来观察路线。如果路线名称是广告或网站，我希望文本具有

颜色：白色；背景色：橙色

。但我不知道怎么做

newvue({
el:“#应用程序”，
数据（）{
返回{
样式类：null
}
},
观察：{
“$route”（到，从）{
如果（to.name==“ads”| to.name==“webs”）{
}
}
}
})

你好

我会创建一个计算属性来表示当前路由是否符合您的条件

计算：{
突出显示（）{
返回此.$route.matched.some（{name}）=>/^（ad|web）s$/.test（name））
}
}

然后您可以在

类

绑定表达式中使用它

文本在此显示

在你的CSS中

。突出显示{
颜色：白色；
背景颜色：橙色；
}

---

有关

matched

属性的信息，请参见。

我猜您缺少route vuejs插件，并将应用程序命名为route name。这里是完整的例子。希望你得到你想要的

const Foo={template:'Foo'}
常量条={template:'Bar'}
常数路由=[
{路径：'/foo'，组件：foo，名称：'ads'}，
{路径：'/bar'，组件：bar，名称：'nowebs'}
]
常量路由器=新的VueRouter({
路线
}) 
const app=新的Vue({
路由器，
数据（）{
返回{
样式类：null
}
},
观察：{
“$route”（到，从）{
如果（to.name==“ads”| to.name==“webs”）{
this.styleClass=“颜色：白色；背景色：橙色”
}否则{
this.styleClass=“”
}
}
}
}).$mount（“#应用程序”）

你好

去福
去酒吧

修复了它。我该如何根据条件改变样式？在这种情况下我还需要观察者吗？@something不管怎样，computed属性的作用基本相同我看到你改变了代码<代码>/^（ad | web）s$/.test（name））。我不太清楚这是什么，或者它与前一个是同一件事？@something无论如何，这只是对路由名称的正则表达式测试。如果您选择添加更多的条件，那么它比一堆

|

条件更容易维护