interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // 命名路由
  *components?: { [name: string]: Component }, // 命名視圖組件 https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,
  *meta?: any,
  // 2.6.0+
  *caseSensitive?: boolean, // 匹配規(guī)則是否大小寫敏感？(默認值：false)
  *pathToRegexpOptions?: Object // 編譯正則的選項
}

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path:'/user',
      component: User
    }
  ]
  
  const router = new VueRouter({
    routes
  })

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path:'/user/:id/:local', // 動態(tài)路徑 :id :local
      component: User
    }
]
  
const router = new VueRouter({
    routes,
})
// 路由跳轉(zhuǎn)

<div id="app">
    <router-view  />
    // 下面這些鏈接都會與/user/:id/:local匹配 
    <router-link  to="/user/007/lk">用戶007</router-link>
    <router-link  to="/user/111/js">用戶111</router-link>
    <router-link  to="/user/10086/yk">用戶10086</router-link>
    <router-link  to="/user/241247/la">用戶241247</router-link>
</div>
/* 當我們跳轉(zhuǎn)至上面的路由時其對應的路由視圖組件User內(nèi)部就可以通過
this.$route.params 獲取到動態(tài)路徑匹配到的信息 
例子: url /user/007/lk   this.$route.params -> {id:'007',local:'lk'}
      url /user/10086/yk  this.$route.params -> {id:'10086',local:'yk'}
*/

// http://localhost:8080/#/user/10086/cc?wd=iPhone&aa=test
{
    name: undefined, // 當前路由名
    *fullPath: "/user/10086/cc" // 當前url完整路徑
    *hash: "" // 當前路由的哈希
    *matched: [{…}] 
    *meta: {}
    params: {id: "10086", local: "cc"} // 動態(tài)路徑匹配到鍵值對對象
    *path: "/user/10086/cc" // 當前url匹配到的路徑
    query: { // url的query字符串網(wǎng)址?后面的參數(shù)解析出來的對象
        wd: "iPhone",
        aa: "test"
    } 
}

import Vue from 'vue'
import HotMusicList from '../views/HotMusicList'

const routes = [
  {
    path: '/hot',
    component: HotMusicList
  },
  {
    // 動態(tài)路徑匹配 通過:id獲取每一首歌不同的id
    path: '/music/:id',
    // 路由的懶加載,通過函數(shù)的形式,可以讓項目中哪些不許一開始就要加載的組件,加載到項目中去
    // 只有瀏覽器跳轉(zhuǎn)到當前路由時,該路由組件才會加載到項目中去
    // 這樣做的好處是減少不必要的加載降低應用加載速度和運行帶寬
    component: () => import('../views/MusicPlay') 
  }
]

const routes = [
  {
    path: '/user', 
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

const routes = [
  {
    path: '/contact',
    component: ContactView
  },
  {
    path: '/user/:id', 
    name: 'User',
    component: () => import('../views/User.vue')
  },
  {
    path: '/oldpath1',
    redirect: '/contact'
  },
  {
    path: '/oldpath2',
    redirect: { name: 'User', params: { name: '小明', age: 19 } }
  },
  /*
      redirect 支持函數(shù)的形式,該函數(shù)接收一個參數(shù)就是個訪問oldpath時生成的location對象
      redirect 函數(shù)的形式必須返回重定向路由的path或location
  */
  {
    path: '/oldpath2',
    redirect:(oldpathLocation) => '/contact'
  }
  {
    path: '/oldpath4',
    redirect:(oldpathLocation) => { name: 'User', params: { name: '小明', age: 19 } }
  }
]

const routes = [
  {
    path: '/hot',
    component: HotMusicList
  },
  {
    // 動態(tài)路徑匹配 通過:id獲取每一首歌不同的id
    path: '/music/:id',
    // 路由的懶加載
    component: () => import('../views/MusicPlay'), 
    props: true
  }
]
// 組件內(nèi)部 就可通過props的id 訪問到this.$route.id
<template>
  <div>
      歌曲播放
      <audio controls :src="musicUrl"/>
  </div>
</template>

<script>

export default {
  props: ['id'], // 路由動態(tài)路徑匹配到的鍵值對會自動傳遞給當前組件的同名props
  data() {
      return {
          musicUrl: ''
      }
  },
  created() {
    fetch(`/song/url?id=${this.id}`)
      .then((res) => res.json())
      .then(({ data }) => {
          //真實開發(fā)中這里要判斷數(shù)據(jù)是否請求成功
        console.log(data[0]);
          // 把歌曲的數(shù)據(jù)賦值給data
        this.musicUrl = data[0]?.url
      });
  },
};
</script>

{
    path: '/home/:id',
    name: 'Home',
    props: {
        a: 1,
        b: false
    },
    component: Home
}

{
    path: '/home/:id',
    name: 'Home',
    props: (route) => ({
        a: route.query.wd, //將路由query.wd傳遞給組件Home的a props
        b: route.params.id //將路由params.id傳遞給組件Home的b props
    }),
    component: Home
}

const routes = [
  {
    path: '/hot',
    component: HotMusicList,
    alias: ['/list','/rank','recommend']
  }
]

[
    {
    path: '/home',
    component: Home,
    children: [
      {
        path: '/home/follow',
        component: () => import('../views/home/Follow')
      },
      {
        path: 'recommend', //路由前不加/相對路徑等價于 "/home/recommed"
        component: () => import('../views/home/Recommend')
      }
    ]
    }
]

<template>
  <div>
    <h3>主頁</h3>
    <div class="tab">
      <router-link to="/home/follow">關注</router-link>|
      <button @click="gotoRecommend">推薦</button>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    gotoRecommend() {
      //   this.$router.push("/home/recommend");
      this.$router.push({path:"/home/recommend", query:{wd:1,offset:0}})
    },
  },
};
</script>    

<template>
  <div>
    <h3>主頁</h3>
    <div class="tab">
      <router-link to="/home/follow">關注</router-link>|
      <button @click="gotoRecommend">推薦</button>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    gotoRecommend() {
      //   this.$router.replace("/home/recommend");
      this.$router.replace({path:"/home/recommend", query:{wd:1,offset:0}})
    },
  },
};
</script>   

this.$router.go(3)   // 從當前路由history棧的位置前進3條
this.$router.go(-1) // 從當前路由history棧的位置后退1條
this.$router.go(0)  // 強制刷新頁面

this.$router.back() // 等價于this.$router.go(-1)

this.$router.forward() // 等價于this.$router.go(1)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

const router = new VueRouter({
  routes
})

export default router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/mock',
    name: 'Mock',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Mock.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

export default {
  props: ['id'],
  data() {
      return {
          musicUrl: ''
      }
  },

  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調(diào)用
    // 不！能！獲取組件實例 `this`
    // 因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
    console.log(undefined)
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該組件被復用時調(diào)用
    // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用。
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調(diào)用
    // 可以訪問組件實例 `this`
  }
}

next()  // 允許路由跳轉(zhuǎn) 
next(true) // 允許路由跳轉(zhuǎn)
next(false) // 不允許路由跳轉(zhuǎn)
next('/') / next({ path: '/' }) // 跳轉(zhuǎn)到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項。
// 注意 只有beforeRouteEnter 的next方法可以接受一個回調(diào)函數(shù),
// 該回調(diào)函數(shù)接收當前路由組件實例對象作為參數(shù),我們可以通過該參數(shù)操作當前組件
beforeRouteEnter(to, from, next) {
    console.log(to , from)
    console.log('組件將要進入,這是組件實例還不存在',this)
    next(vm => {
      fetch(`/song/url?id=${vm.id}`)
      .then((res) => res.json())
      .then(({ data }) => {
          //真實開發(fā)中這里要判斷數(shù)據(jù)是否請求成功
        console.log(data[0]);
          // 把歌曲的數(shù)據(jù)賦值給data
        vm.musicUrl = data[0]?.url
      });
    }) // 允許路由跳轉(zhuǎn)
}

beforeEnter(to, from, next) 當路由將要導航至當前路由時觸發(fā)
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/discover',
        component: () => import('../views/Discover')
    },
    {
        path: '/mine',
        component: () => import('../views/Mine'),
        //路由獨享守衛(wèi)
        beforeEnter(to, from, next) {
            // 因為這個守衛(wèi)沒有任何DOM操作或者對組件自身狀態(tài)進行讀寫
            // 這樣的守衛(wèi)就可以作為路由獨享守衛(wèi)
            // 正確的做法存在cookie storage中
            if (localStorage.getItem("user")) {
              next();
            } else {
              // 這里嗎沒有this, next接收一個回調(diào)函數(shù),在回調(diào)函數(shù)中跳轉(zhuǎn)
              // 下面的寫法進入了個人頁面,又從個人頁面重定向到登錄,這樣可能會造成一些不必要的bug
              //   next((vm) => {
              //   vm.$router.replace('/landr')
              //   });
              next({name:'login',params:{to}}); //阻止本次跳轉(zhuǎn),直接導航到指定路由
            }
          }
    },
    {
        path: '/landr', // login an register
        component: () => import('../views/loginanregister/LoginAndRegister'),
        children: [
            {
                name:'login',
                path: 'login',
                component: () => import('../views/loginanregister/Login')
            },
            {
                path: 'register',
                component: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

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

Vue.use(Router)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/discover',
        name: 'Discover',
        component: () => import('../views/Discover')
    },
    {
        path: '/mine',
        name: 'Mine',
        component: () => import('../views/Mine'),
    },
    {
        path: '/landr', // login an register
        component: () => import('../views/loginanregister/LoginAndRegister'),
        children: [
            {
                name: 'login',
                path: 'login',
                component: () => import('../views/loginanregister/Login')
            },
            {
                path: 'register',
                component: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

const router = new Router({
    routes,
    linkExactActiveClass: 'active'
})
// 路由的全局守衛(wèi)所有的路由跳轉(zhuǎn),都會調(diào)用該守衛(wèi)
// 全局路由守衛(wèi)也是Vue router應用中,最適合做登錄驗證的地方
router.beforeEach((to, from, next) => {

    if(to.name === "Mine" || to.name === "Discover") {
        // 因為這個守衛(wèi)沒有任何DOM操作或者對組件自身狀態(tài)進行讀寫
        // 這樣的守衛(wèi)就可以作為路由獨享守衛(wèi)
        // 正確的做法存在cookie storage中
        if (localStorage.getItem("user")) {
            next();
        } else {
            // 這里嗎沒有this, next接收一個回調(diào)函數(shù),在回調(diào)函數(shù)中跳轉(zhuǎn)
            // 下面的寫法進入了個人頁面,又從個人頁面重定向到登錄,這樣可能會造成一些不必要的bug
            //   next((vm) => {
            //   vm.$router.replace('/landr')
            //   });
            next({ name: 'login', params: { to } }); //阻止本次跳轉(zhuǎn),直接導航到指定路由
        }
    }else {
        next()
    }

})

export default router