VUE2.x |
您所在的位置：网站首页 › vue路由跳转传参能不在路由显示吗 › VUE2.x |
|
如果你希望随着页面的跳转，页面标题发生改变，你可以结合使用 Vue Router 和 Vue Meta 插件来实现。 Vue Meta 是一个 Vue.js 插件，它可以让你在每个页面中动态设置页面的标题、描述、关键字等元数据。 以下是一个示例，演示如何使用 Vue Router 和 Vue Meta 来实现页面标题的动态改变： 安装 Vue Meta： npm install vue-meta 在 main.js 中配置 Vue Meta 和 Vue Router： import Vue from 'vue'; import VueMeta from 'vue-meta'; import App from './App.vue'; import router from './router'; Vue.use(VueMeta); new Vue({ router, render: h => h(App) }).$mount('#app'); 在路由配置文件（通常是 router.js）中，为每个路由定义 meta 字段，并将页面标题存储在 meta.title 中： import Vue from 'vue' import VueRouter from 'vue-router' import Index from '@/views/index.vue' import About from '@/views/About.vue' import Login from '@/views/login.vue' Vue.use(VueRouter) const routes = [ { path: '/index', name: 'Index', component: Index, meta: { title: '首页' } }, { path: '/about', name: 'About', component: About, meta: { title: '关于' } }, { path: '/', name: 'Login', component: Login, meta: { title: '登录' } } ] const router = new VueRouter({ routes }) export default router在上述示例中，我们为每个路由配置中添加了一个 meta 字段，用于存储页面的标题。 在根组件（通常是 App.vue）中使用 Vue Meta 的 $metaInfo 对象来设置页面的标题： My Vue App Login Index export default { name: 'App', metaInfo() { return { title: this.$route.meta.title || 'My Vue App' }; } };在上述示例中，我们使用 metaInfo 方法来动态设置页面的标题。根据当前路由的 meta 字段中的 title 属性来设置页面的标题，如果没有定义则使用默认的标题 'My Vue App'。 通过以上步骤，当你跳转到不同的页面时，页面的标题将会随之改变为对应页面的标题。请确保在路由配置中为每个页面设置了正确的标题，并在根组件中使用 Vue Meta 的 $metaInfo 对象来动态设置页面的标题。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |