<template>
 <div>這是登錄頁面</div>
</template>

<script>
 export default {
  name: "Login"
 }
</script>

<style scoped>

</style>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'


Vue.use(Router)

const router = new Router({
 mode: 'history', //去掉url中的#
 routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
  title: '登錄',
  requiresAuth: false, // false表示不需要登錄
  },
  component: Login
 },
 {
  path: '/',
  name: 'HelloWorld',
  meta: {
  title: '首頁',
  requiresAuth: true, // true表示需要登錄
  },
  component: HelloWorld
 },

 ]
})

// 路由攔截，判斷是否需要登錄
router.beforeEach((to, from, next) => {
 if (to.meta.title) {
 //判斷是否有標(biāo)題
 document.title = to.meta.title;
 }
 // console.log("title",document.title)
 // 通過requiresAuth判斷當(dāng)前路由導(dǎo)航是否需要登錄
 if (to.matched.some(record => record.meta.requiresAuth)) {
 let token = localStorage.getItem('token')
 // console.log("token",token)
 // 若需要登錄訪問，檢查是否為登錄狀態(tài)
 if (!token) {
  next({
  path: '/login',
  query: { redirect: to.fullPath }
  })
 } else {
  next()
 }
 } else {
 next() // 確保一定要調(diào)用 next()
 }
})

export default router;

localStorage.setItem('token', '12345678910')