vue----webpack模板----meta路由元信息

路由元信息

meta：
　　每个路由的标识信息，是路由独有的一个信息

给每个路由的配置项多一个meta属性
meta:{
　
}

path,name,component,redirect,children,meta,props

路由元信息用途

根据每个路由特有的信息

1.验证用户是否登录

2.设置标题

3.是否显示某个组件
……

验证用户是否登录，设置标题，举例：

import Vue from 'vue'
import Router from 'vue-router'

import Header from "../components/header"
import Detail from "../components/goodsDetails"
import Login from "../components/login"
import goodsList from "../components/goodsList"
Vue.use(Router)

let router = new Router({
  routes: [{
      path: '/',
      redirect: Header
    }, {
      path: '/details/:name/:price/:id',
      name: 'details',
      component: Detail,
      meta: {
        isLogin: true,
        title: "详情页"
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        isLogin: false,
        title: "登录页"
      }
    }, {
      path: '/goodsList',
      name: "goodsList",
      component: goodsList,
      meta: {
        isLogin: false,
        title: "列表页"
      }
    }
  ]
})

//判断是否登录
router.beforeEach((to, from, next) => {
  // console.log(to);
  //设置标题
  document.title = to.meta.title;
  //判断是否登录
  let token = true;
  if (to.meta.isLogin) {
    if (token) {
      next();
    } else {
      next("/login")
    }
  }
  next();


})

export default router;