它有什么用
从下面的另一个官方栗子里已经给出了答案.
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来实现的。