vue路由点击跳转页面title随之变化

最新推荐文章于 2023-09-09 00:10:49 发布

苏三金

最新推荐文章于 2023-09-09 00:10:49 发布

阅读量884

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/SANJIN0527_/article/details/108275645

版权

本文介绍了如何在Vue项目中实现在路由跳转时页面标题随之变化，主要涉及在router的index.js文件中配置meta属性，以及针对iOS系统中部分APP webview中无法通过document.title修改标题的问题提供解决方案，包括安装、引入和使用特定插件。

摘要由CSDN通过智能技术生成

先看实现的效果视频：

在这里插入图片描述
一、要在router文件下的index.js文件下写
（每一个路由对象下配置meta）下面那我写的这个项目举例

const router = new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login,
      meta: { title: "登录系统" }
    },
    {
      path: '/ErrorRouter',
      name: 'ErrorRouter',
      component: ErrorRouter,
      meta: { title: "404" }
    },
    {
      path: '/',
      component: Home,
      meta: {
        requtreAuth: true,
        title: "系统首页"
      },
      children: [
        {
          path: '/',
          name: 'HomeViews',
          component: HomeViews,
          meta: { title: "首页", needLogin: true }
        },
        {
          path: '/Commodity',
          name: 'Commodity',
          component: Commodity,
          meta: { title: "商品管理", needLogin: true }
        },
        {
          path: '/Category',
          name: 'Category',
          component: Category,
          meta: { title: "品类管理", needLogin: true }
        },
        {
          path: '/Userback',
          name: 'Userback',
          component: Userback,
          meta: { title: "用户管理", needLogin: true }
        },
        {
          path: '/Order',
          name: 'Order',
          component: Order,
          meta: { title: "订单管理", needLogin: true }
        },
        {
          path: '/Detail',
          name: 'Detail',
          component: Detail,
          meta: { title: "商品详情", needLogin: true }
        },
        {
          path: '