vue实现路由跳转动态title标题信息-前端开发

下面是vue实现路由跳转动态title标题信息的完整攻略：

下面是vue实现路由跳转动态title标题信息的完整攻略：

使用vue-router管理路由

在vue中，我们可以使用vue-router管理路由，对应的npm包名为vue-router。使用vue-router能够方便的实现从页面跳转到另外一个页面，同时在页面跳转时可以动态修改页面的标题信息。具体步骤如下：

安装vue-router

在项目中使用vue-router需要先安装它，可以使用npm来安装，具体命令如下：

npm install vue-router --save

在router/index.js中配置路由

在使用vue-router之前，需要在src/router文件夹下新建一个index.js文件，该文件用于配置路由，具体内容如下：

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/views/Home'
import About from '@/views/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        title: '关于我们'
      }
    }
  ]
})

在该文件中，我们首先引入了Vue和vue-router两个库，然后根据项目需求配置了路由。每一个路由都包含了path、name、component、meta四个属性。其中，meta属性用于设置页面的标题信息，标题信息会根据路由的meta设置进行动态修改。

修改App.vue文件

使用vue-router进行路由跳转时，需要在App.vue文件中添加一个标签，用于加载对应的组件，具体内容如下：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 样式省略 */
</style>

实现动态标题

在路由配置完成之后，我们需要在前端页面中实现动态标题。可以通过在vue实例的mounted钩子函数中监听路由变化，然后在路由变化后根据路由中meta属性的值动态修改文档标题。具体代码如下：

import router from './router'

// 监听路由变化
router.afterEach((to, from) => {
  // 根据路由中的meta设置文档标题
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  }
})

在以上代码中，我们首先引入了vue-router配置好的路由，然后在router.appendEach()钩子函数中监听路由变化。每当一个新的路由被访问时，都会触发该钩子函数，我们在该函数中根据路由中的meta属性设置文档标题。

示例

下面以一个简单的示例说明vue实现路由跳转动态title标题信息的具体操作。

示例一

在这个示例中，我们创建两个页面，分别为Home和About。在路由配置中设置Home页面的标题为“首页”，About页面的标题为“关于我们”。当用户从Home页面跳转到About页面时，页面标题会自动从“首页”变为“关于我们”。

创建项目

我们可以使用Vue CLI来快速搭建一个Vue项目，具体命令如下：

vue create myapp

在该命令执行完成后，项目的基本结构和配置都已经完成，我们可以进入到该项目的文件夹中查看。

添加路由

在src/router/index.js文件中添加路由配置，具体内容如下：

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/views/Home'
import About from '@/views/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        title: '关于我们'
      }
    }
  ]
})

在以上配置中，我们设置了Home页面的标题为“首页”，About页面的标题为“关于我们”。

实现动态标题

在src/main.js文件中添加监听路由变化的代码，具体内容如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 监听路由变化
router.afterEach((to, from) => {
  // 根据路由中的meta设置文档标题
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在以上代码中，我们监听了路由变化，只要页面的路由变化，就会触发该函数中的代码。在该函数中，我们判断了当前路由是否配置了meta属性，并且meta属性中是否有设置标题。如果满足上述条件，就将文档的标题设置为路由中的meta属性的标题。

创建页面

在src/views文件夹下创建Home.vue和About.vue文件，并在这两个文件中添加一些简单的文本内容，具体内容如下：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      title: '首页',
      content: '这里是首页'
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      title: '关于我们',
      content: '这里是关于我们'
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

在以上代码中，我们使用了Vue的组件语法，在template标签中添加了一些简单的HTML代码。在script标签中，我们使用了Vue的组件对象，并且设置了一些基本的属性。在组件中使用到的{{ title }}和{{ content }}属性都是在data函数中返回的。

修改App.vue文件

在src/App.vue文件中添加标签，用于加载对应的组件，具体内容如下：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 样式省略 */
</style>

在以上代码中，我们只添加了一个标签，用于加载对应的组件。

运行

在以上工作完成后，我们可以使用以下命令运行项目：

npm run serve

然后在浏览器中打开http://localhost:8080，就可以看到这个示例了。在示例中，我们使用了两个链接，分别是“首页”和“关于我们”，点击这两个链接，可以看到浏览器的标题会自动根据页面路由中配置的meta属性进行修改。

示例二

在这个示例中，我们创建了一个博客网站，网站的首页为BlogList页面，用于显示博客文章的列表；当用户点击博客文章进入到单独的文章页面时，文档标题会自动切换为当前文章的标题。

创建项目

我们使用Vue CLI来快速搭建一个Vue项目，具体命令如下：

vue create myblog

在该命令执行完成后，项目的基本结构和配置都已经完成，我们可以进入到该项目的文件夹中查看。

添加路由

在src/router/index.js文件中添加路由配置，具体内容如下：

import Vue from 'vue'
import Router from 'vue-router'

import BlogList from '@/views/BlogList'
import BlogDetail from '@/views/BlogDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BlogList',
      component: BlogList,
      meta: {
        title: '博客列表'
      }
    },
    {
      path: '/blog/:id',
      name: 'BlogDetail',
      component: BlogDetail,
      meta: {
        title: '博客详情'
      }
    }
  ]
})

在以上代码中，我们设置了BlogList页面的标题为“博客列表”，BlogDetail页面的标题为“博客详情”。

实现动态标题

在src/main.js文件中添加监听路由变化的代码，具体内容如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 监听路由变化
router.afterEach((to, from) => {
  // 根据路由中的meta设置文档标题
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

创建页面

在src/views文件夹下创建BlogList.vue和BlogDetail.vue文件，并在这两个文件中添加一些简单的文本内容，具体内容如下：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="blog in blogs" :key="blog.id">
        <router-link :to="`/blog/${blog.id}`">{{ blog.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BlogList',
  data() {
    return {
      title: '博客列表',
      blogs: [
        {
          id: 1,
          title: '第一篇博客'
        },
        {
          id: 2,
          title: '第二篇博客'
        },
        {
          id: 3,
          title: '第三篇博客'
        }
      ]
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'BlogDetail',
  data() {
    return {
      title: '',
      content: ''
    }
  },
  mounted() {
    // 获取路由中的博客id，从而获取对应的博客文章内容
    const blogId = this.$route.params.id

    // 根据博客id获取对应的博客文章内容
    setTimeout(() => {
      switch (blogId) {
        case '1':
          this.title = '第一篇博客'
          this.content = '这是第一篇博客文章内容...'
          break
        case '2':
          this.title = '第二篇博客'
          this.content = '这是第二篇博客文章内容...'
          break
        case '3':
          this.title = '第三篇博客'
          this.content = '这是第三篇博客文章内容...'
          break
        default:
          break
      }
      document.title = this.title
    }, 1000)
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

在以上代码中，我们使用了Vue的组件语法，在template标签中添加了一些简单的HTML代码。在script标签中，我们使用了Vue的组件对象，并且设置了一些基本的属性和方法。在BlogList组件中，我们通过v-for循环展示了博客文章的列表，并且使用了标签实现了跳转。

在BlogDetail组件中，我们监听了组件的mounted钩子函数，并且获取了当前路由中的博客id，从而获取对应的博客文章的内容，最后使用setTimeout模拟了异步获取文章的过程。在获取文章内容后，我们将文章的标题设置为文档的标题。

修改App.vue文件

在src/App.vue文件中添加标签，用于加载对应的组件，具体内容如下：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 样式省略 */
</style>

在以上代码中，我们只添加了一个标签，用于加载对应的组件。