Vue-Router可以实现哪些需求

需求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')
  }
})