<template lang="">
  <div>
    music組件
    <!-- <p>{{this.$route.params.id}}</p> -->
    <p>{{id}}</p>
    <button @click="btn">點(diǎn)擊打印this</button>
    <button @click="goTo">跳轉(zhuǎn)到金玉良緣</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.forward()">前進(jìn)</button>
  </div>
</template>
<script>
export default{
  props:["id"],
  methods:{
    btn(){
      console.log(this);
    },
    goTO(){
      this.$router.replace("/music4")
    }
  }
}
</script>
<style lang="less" scoped>
div{
width: 100%;
height: 50px;
background-color:orangered;
}
</style>

import Vue from "vue";
import VueRouter from "vue-router";
import child from "@/components/child.vue"
import left from "@/components/left.vue"
import right from "@/components/right.vue"
import Tab1 from "@/components/tabs/Tab1.vue"
import Tab2 from "@/components/tabs/Tab2.vue"
import music from "@/components/music.vue"
import login from "@/components/login.vue"
import background from "@/components/background.vue"
Vue.use(VueRouter)
const router=new VueRouter({
  routes:[
    {path:"/",redirect:"/firstPage"},
    {path:"/music:id",component:music,props:true},
    {path:"/firstPage",component:child,redirect:"/firstPage/tab1",children:[
 {path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]},
    {path:"/img",component:left},
    {path:"/video",component:right},
    {path:"/login",component:login},
    {path:"/background",component:background}
  ]
})
router.beforeEach(function(to,from,next){
  // 要拿到用戶將要訪問的hash地址
  // 判斷hash地址是否等于/background
  // 如果等于，證明需要登錄之后，才能訪問成功
  // 如果不等于，則不需要登錄，直接放行
  // 如果訪問的地址是/background，則需要讀取localStorage中的token值
  // 如果有token，則放行，如果沒有，則強(qiáng)制跳轉(zhuǎn)到/login登錄頁
  if(to.path==="/background"){
    const token=localStorage.getItem("token")
    if(token){
      next()
    }else{
      next("/login")
    }
  }else{
    next()
  }
})
// 4.向外共享路由的實(shí)例對象
export default router