vue-router 当前路由的title
时间: 2023-05-10 08:01:25 浏览: 203
在Vue.js的SPA(单页应用程序)中,Vue Router可用于支持路由功能。它是一个官方的Vue.js插件,用于实现客户端路由。当用户在应用程序中浏览不同的页面时,Vue Router能够确保正确的页面组件被加载,同时还可以维护浏览器的历史记录。
在Vue Router中获取当前路由的title可以使用$route对象的meta属性,这个属性可以存放一些自定义的信息。在每个路由组件中,我们可以通过配置meta属性来存储title信息,如下所示:
```
const routes = [
{
path: '/',
component: Home,
meta: {
title: '首页'
}
},
{
path: '/about',
component: About,
meta: {
title: '关于我们'
}
},
// more routes
]
```
在每个路由组件中的meta属性中定义了title信息。接下来,我们可以在Vue Router的全局导航守卫(beforeEach函数)中获取当前路由的meta.title信息,并将其设置为网页的标题。
```
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '默认标题'
next()
})
```
这个函数会在每次路由切换的时候调用,并在路由切换之前设置网页的标题。如果当前路由没有设置title信息,则使用默认的标题。通过这样的方式,我们可以动态设置网页的标题并且让用户更好地了解当前页面的内容。
阅读全文