//全局前置守衛(wèi)
router.beforeEach((to,from,next) =>{
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
})

router.afterEach((to,from) =>{
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象

//該文件用于創(chuàng)建整個應(yīng)用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";

//引入路由組件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二級路由組件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'

import DataList from '../pages/DataList'

//創(chuàng)建并暴露一個VueRouter
const router =  new VueRouter({
    routes:[
        //配置路由路徑和路由組件
        {
            //這里的路徑可自由定義，但是為了初學(xué)者好理解，我就采用和組件同樣的命名，防止在寫路徑的時候搞混
            name:'導(dǎo)航一',
            path:'/TestA',
            component:TestA,     //要跳轉(zhuǎn)到的組件   
            children:[
                {
                    // 給二級路由起名字
                    name:'DataName',
                    path:'DataList/:introduce',     //起到占位作用
                    component:DataList
                }
            ]
        },
        {
            name:'導(dǎo)航二',
            path:'/TestB',
            component:TestB,
            meta:{isAuth:true,},
            // 配置二級路由
            children:[
                {
                    path:'TestBHzw',     //重點注意，不要加 /
                    component:TestBHzw
                },
                {
                    path:'TestBHyrz',
                    component:TestBHyrz
                }
            ]
        }
    ]
})

//全局前置路由，配合瀏覽器localStorage進(jìn)行鑒權(quán)操作
router.beforeEach((to, from, next) =>{
    //首先，我們先看一看to和from參數(shù)，next就是執(zhí)行的意思，不寫頁面是不會跳轉(zhuǎn)的
    // console.log(to, from);
    if(to.meta.isAuth){     //判斷是否需要鑒權(quán)
        if(localStorage.getItem('name') === '張三'){
            next();
        }else{
            alert('不好意思，姓名不對，沒有權(quán)限');
        }
    }else{
        next()
    }
})

// 全局后置路由，簡單寫一個彈窗，在進(jìn)入每一個路由組件后彈出一句話
router.afterEach(() =>{
    alert('歡迎你?。?);
})

export default router;

<template>
  <div>
    <h4>著名動漫簡介</h4>
    <ul>
      <li v-for="i in DataList" :key="i.id">
        <!-- 使用params參數(shù)傳遞動態(tài)參數(shù) 注意：params傳遞參數(shù)必須配合name屬性-->
        <router-link :to="{
          name:'DataName',
          params:{
            introduce:i.introduce
          }
        }">{{i.name}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'TestA',
    data(){
      return{
        DataList:[
          {
            id:1,
            name:'《海賊王》',
            introduce:'《航海王》是日本漫畫家尾田榮一郎作畫的少年漫畫作品，于1997年7月22日在集英社《周刊少年Jump》開始連載。改編的電視動畫《航海王》于1999年10月20日起在富士電視臺首播。'
          },
          {
            id:2,
            name:'《火影忍者》',
            introduce:'電視動畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫，2002年10月3日在東京電視臺系列全6局、岐阜放送首播，共220話；第二季《火影忍者疾風(fēng)傳》于2007年2月15日－2017年3月23日在東京電視臺播出，共500話；累計全720話。'
          },
          {
            id:3,
            name:'《斗破蒼穹》',
            introduce:'《斗破蒼穹》是一部由閱文集團(tuán)旗下起點中文網(wǎng)作家天蠶土豆同名玄幻長篇經(jīng)典小說改編的動畫。該動畫第一季已于2017年1月7日在騰訊視頻上映，bilibili同步跟播，共十二集。'
          },
          {
            id:4,
            name:'《鬼滅之刃》',
            introduce:'《鬼滅之刃》是日本漫畫家吾峠呼世晴所著的少年漫畫，自2016年2月15日—2020年5月11日在集英社《周刊少年Jump》上連載。已完結(jié)。'
          }
        ]
      }
    }
}
</script>

<style scoped>
h4{
  text-align: center;
}
a{
  text-decoration: none;
}
.active:visited{
  color: brown;
}
</style>

<template>
  <div>
    <h4>我是內(nèi)容二</h4>
    <!-- 多級路由 -->
    <div class="box">
      <!-- 此處路徑一定要寫完整路徑 -->
      <router-link to="/TestB/TestBHzw" active-class="active">點擊查看《海賊王的簡介》</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/TestB/TestBHyrz" active-class="active">點擊查看《火影忍者的簡介》</router-link>
      <hr>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
    name:'TestB',
}
</script>

<style scoped>
h4{
  text-align: center;
}
.box{
  text-align: center;
}
a{
  text-decoration: none;
}
.active:visited{
  color: brown;
}
</style>

  <template>
  <div>
      <ul>
          <!-- 采用插值語法就可以拿到父級路由中的數(shù)據(jù) -->
          <li>{{$route.params.introduce}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'DataList'
}
</script>

<style>

</style>

<template>
  <div>
    <p>
      電視動畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫，
      2002年10月3日在東京電視臺系列全6局、岐阜放送首播，共220話；
      第二季《火影忍者疾風(fēng)傳》于2007年2月15日－2017年3月23日在東京電視臺播出，共500話；累計全720話。
    </p>
  </div>
</template>

<script>
export default {
    name:'TestBHyrz'
}
</script>

<style>

</style>

beforeEnter(to,from,next){
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
}

//進(jìn)入守衛(wèi)：通過路由規(guī)則，進(jìn)入該組件時被調(diào)用
beforeRouteEnter (to, from, next) {
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
},
//離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調(diào)用
beforeRouteLeave (to, from, next) {
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
}