哈希路由原理：通過(guò)監(jiān)聽(tīng)的方式看url地址上攜帶的哈希值來(lái)進(jìn)行對(duì)應(yīng)的顯示，juqery里面有hashchange來(lái)進(jìn)行監(jiān)聽(tīng)。

history路由原理：使用h5的api，history.pushState()進(jìn)行跳轉(zhuǎn)。監(jiān)聽(tīng)瀏覽器前進(jìn)或回退。

history缺點(diǎn)：怕刷新找不到/movie這個(gè)東西（需要后臺(tái)來(lái)進(jìn)行配置）

vueRouter介紹

const router = new Router({
    routes: [
        {
            path: '/',
            redirect: '/movie'    // 重定向
        },
        {
            path: '/movie',
            component: Movies
        },
        {
            path: '/theatres',
            component: Theatres
        }

    ]
})


<template>
  <div id="app">
    <ul>
      <router-link  active-class="active" tag="li" to="/movie">電影</router-link>
      <router-link  active-class="active" tag="li" to="/theatres">影院</router-link>
    </ul>
    <router-view/>
  </div>
</template>

active-class 高亮樣式
tag 轉(zhuǎn)化后的標(biāo)簽?zāi)J(rèn)是a標(biāo)簽
to 跳轉(zhuǎn)的組件

路由傳參：

1. query傳參（問(wèn)題：首頁(yè)默認(rèn)傳參高亮?xí)袉?wèn)題可以使用動(dòng)態(tài)路由）和path匹配
2. params 動(dòng)態(tài)路由傳參：id，和name匹配（缺點(diǎn)刷新數(shù)據(jù)會(huì)丟失，解決辦法query或者localStorage）

路由分兩種

• 編程式的導(dǎo)航 router.push
• 聲明式的導(dǎo)航 <router-link>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="routerTo">click here to news page</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    routerTo(){
      this.$router.push({ name: 'news', params: { userId: 123 }});
    }
  }
}
</script>
 
<style>
</style>



<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

1.命名路由搭配params，刷新頁(yè)面參數(shù)會(huì)丟失
2.查詢(xún)參數(shù)搭配query，刷新頁(yè)面數(shù)據(jù)不會(huì)丟失
3.接受參數(shù)使用this.$router后面就是搭配路由的名稱(chēng)就能獲取到參數(shù)的值

動(dòng)態(tài)路由概念：多個(gè)路徑渲染一個(gè)組件，組件不會(huì)重新渲染

1. watch可以進(jìn)行監(jiān)聽(tīng)
2. vueRouter給我們提供了生命周期的鉤子，beforeRouteUpdate（就是為動(dòng)態(tài)路由準(zhǔn)備的）

路由守衛(wèi) （一共7個(gè)鉤子函數(shù)）

1. 全局前置守衛(wèi)：router.beforeEach
2. 全局解析守衛(wèi)：router.beforeResolve
3. 全局后置鉤子：router.afterEach
4. 路由獨(dú)享的守衛(wèi)：可以在路由配置上直接定義 beforeEnter 守衛(wèi)
5. 組件內(nèi)的守衛(wèi)：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

// 寫(xiě)在router/index.js中依靠router
router.beforeEach((to, from, next) => {
    // to:要去哪
    // from：從哪來(lái)
    // next：可不可以放行  next();
    if(to.meta.r === 'ent'){
        alert('進(jìn)入電影娛樂(lè)')
    }
    console.log("to",to);
    console.log("from",from);
    console.log(0);
    next();
})

router.afterEach( (to,from) => {
    // 在走的時(shí)候做一些事情，沒(méi)有辦法阻止
    
})

組件內(nèi)的守衛(wèi)：beforeRouteEnter中是拿不到組件實(shí)例的要在next中傳一個(gè)回調(diào)函數(shù)來(lái)拿到next((vm)=>{})
beforeRouteUpdate：是專(zhuān)門(mén)來(lái)監(jiān)聽(tīng)動(dòng)態(tài)路由的
beforeRouteLeave：在組建內(nèi)部可以實(shí)現(xiàn)離開(kāi)判斷是否離開(kāi)

路由懶加載：需要webpack來(lái)支持

component:()=>{import('路徑')}