vue2vue3中你知道什么是路由元信息，路由元信息配置。切换页面跳转路由更换title。

它有什么用

---

从下面的另一个官方栗子里已经给出了答案.

router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requiresAuth)) {

    //对matched不了解的建议看官方api文档,或我7.1节的说明

    //数组some方法,如果meta.requiresAuth为ture,则返回true.此时,说明进入该路由前需要判断用户是否已经登录 

    if (!auth.loggedIn()) {   //如果没登录,则跳转到登录页

      next({

        path: '/login',

        query: { redirect: to.fullPath }  //官方例子的这个小细节很好,通过query将要跳转的路由路径保存下来,待完成登录后,就可以直接获取该路径,直接跳转到登录前要去的路由

      })

    } else {

      next()

    }

  } else {

    next() // 确保一定要调用 next()

  }

})

我们可以通过在meta里设置的状态,来判断是否需要进行登录验证.如果meta里的requiresAuth为true,则需要判断是否已经登录,没登录就跳转到登录页.如果已登录则继续跳转.

此时,有人可能会说,前面说的path,params,query都可以存储信息,作为登录验证的状态标记.的确,它们也可以达到同样的效果.如果是少量单个的验证,使用它们问题不大. 但如果是多个路由都需要进行登录验证呢?path,params,query是把信息显性地存储在url上的.并且多个路径都把一个相同的状态信息加在url上.这样就使url不再单纯,并且也很不优雅美观. 所以要优雅要隐性地传递信息,就使用meta对象吧!

2、怎么切换页面换title呢？（vue3）

import {

  createRouter,

  createWebHashHistory

} from 'vue-router'



import homeModel from '../views/homeModel/route'

const routes = [

  {

    path: '/myOrder',

    name: 'myOrder',

    component: () => import('../components/order/myOrder.vue'),

    meta: {

      title: '我的订单',

      intercept: true,

    }

  },

  {

    path: '/myRoll',

    name: 'myRoll',

    component: () => import('../components/roll/myRoll.vue'),

    meta: {

      title: '我的礼券',

      intercept: true,

    }

  }

]



const router = createRouter({

  history: createWebHashHistory(),

  routes

})



router.beforeEach((to, go) => {

  // 从本地存储中取出token

  let token = localStorage.getItem('token')

  if (token && token != 'null') { // 证明有用户  

    return true //本地存储有token 用户可以进入页面

  } else {

    if (to.meta.intercept) { // to.meta.intercept  为true 说名要拦截这个页面

      return {

        path: '/login',

        // query: {

        //   ...to.query

        // }

      } // return相当于vue2 的next

    } else { // 否则就可以进去这个页面

      return true

    }



  }

})





// 切换页面换title 全局的前置守卫

router.afterEach((to, next) => {

  //获取 document.querySelector title = 直接改掉 这么简单

  document.querySelector('title').innerText = to.meta.title

})



export default router

码字不易-s-z-h

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-Jkl62cr2-1718561241923)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。