需求1: 针对每一个页面,如何添加不同的title?
网页标题通过<title></title>
来显示,但是spa只有一个固定的html, 切换到不同的页面时,标题不会发生变化, 但是可以通过js来修改的<title>
中的内容;
window.doucment.title = "更改的标题"
但是,在Vue中,希望能全局的统一管理和修改这些页面的title; 所以, 我们在route对象的meta中为每一个页面添加title属性,同时利用路由的前置守卫和后置守卫,为每一个页面的title进行赋值;
//router.js部分代码如下
const routes = [
{
path: "/index",
name: 'home',
meta: {
title: '首页'
},
component: () =>
import(/* webpackChunkName: "home" */ "../views/index.vue"),
},
{
path: "/about",
name: 'about',
meta: {
title: '关于'
},
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
]
const router = new VueRouter({
base: process.env.BASE_URL,
routes
});
//路由守卫
router.beforeEach((to, from, next) => {
window.document.title = to.meta.title;
next();
})
需求2:跳转到每个页面前,滚动条均能回到顶部;
同理,在路由的守卫中进行处理
router.beforeEach((to,form,next)=>{
window.scrollTo(0,0);
})
需求3:对页面进行是否登录校验,如果登录了则可以访问,否则跳转到登录页
首先进行分析下,采用Token的验证方式,在登录的时候,会将用户名和密码发送给后台,后台进行验证后,会对请求进行响应返回token, 前端会将token进行存储在浏览器中
localStorage或者sessionStorage或者cookie,三者的区别,可参考: (偷懒不写了)cookies、sessionStorage和localStorage解释及区别
此处以sessionStorage为例:
router.beforeEach((to, form, next) => {
if (window.sessionStorage.getItem(token)) {
next();
} else {
next('/login')
}
})