vue-router基础使用

router.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
// import List from './views/List.vue'
import Detail from './views/Detail.vue'

Vue.use(Router)

const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: Home,
      children: [{
        path: '/list',
        name: 'list',
        component: () => import('./views/List.vue')
      },
      {
        path: '/detail/:id',
        component: Detail,
        props: true
      }]
    },
    {
      path: '/about',
      name: 'about',
      meta: {auth: true}, // 需要认证---路由守卫
      // beforeEnter(){}, // 路由级钩子
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

// 全局守卫，路由的全局钩子
router.beforeEach((to, from, next) => {
  if(to.meta.auth && !window.isLogin){
    if(window.confirm('请登录')){
      window.isLogin = true
      next() // 登录成功，继续下一步
    }else{
      next('/') // 放弃会首页
    }
  }else {
    next() // 不需要登录，继续
  }
})

export default router

About.vue中

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
export default {
  // beforeRouteEnter(){} // 组件级钩子
}
</script>