vue路由核心要點（vue-router）

時間 2020-06-18

原文原文鏈接

//index.js文件中引入
// 路由的核心模塊
import VueRouter from 'vue-router'
import Cinema from '@/views/Cinema'
// 必需要加  註冊路由插件
Vue.use(VueRouter)
// 路由映射表
const routes = [
  {
    path: '/cinema',
    component: Cinema
  },
]
const router = new VueRouter({
  routes: routes
})
export default router

main.js

import router from './router' 
//new Vue 啓動
new Vue({
  el: '#app',
  //讓vue知道咱們的路由規則
  router: router, //能夠簡寫router
  render: c => c(App),
})

3.vue-router跳轉和傳參

1.用name傳遞參數
在路由文件中配置name屬性，組件中用 $router.name來接受

{
    path: '/cinema',
    name：'cinema'
    component: Cinema
  }
  <!--獲取-->
  <p>{{ $router.name}}</p>

2.經過 <router-link> 標籤中的to傳參

<!--須要在路由映射中提早配置好-->
{
    path: '/cinema',
    component: Cinema
  }
  
<router-link :to="{path:'/cinema',params:{key:value}}">666</router-link>
<!--獲取-->
{{$route.params.key}}

3.經過url地址欄傳參數

{
    path: '/detail',
    component: Detail
  },
 this.$router.push({path: '/detail', query: {data: datail}}
 <!--獲取-->
 {{this.$route.query.data}}

4.vue-router實現的原理

SPA(single page application):單一頁面應用程序，只有一個完整的頁面；它在加載頁面時，不會加載整個頁面，而是隻更新某個指定的容器中內容。單頁面應用(SPA)的核心之一是: 更新視圖而不從新請求頁面 ;vue-router在實現單頁面前端路由時，提供了兩種模式,根據mode參數來決定採用哪種方式

兩種模式

一、Hash模式：

單頁面應用：頁面跳轉是無刷新的，可是url 每次變化的時候，都會形成頁面的刷新,因此爲了解決經過hash來實現路由，在改變 url的狀況下，保證頁面的不刷新 url hash 相似於

http://www.xxx.com/#/film

這種 #。後面 hash 值的變化，並不會致使瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發hashchange 這個事件，經過這個事件咱們就能夠知道 hash 值發生了哪些變化。而後咱們即可以監聽hashchange來實現更新頁面部份內容的操做：

function matchAndUpdate () {
   // todo 匹配 hash 作 dom 更新操做
}
window.addEventListener('hashchange', matchAndUpdate)

二、History模式：

history 模式時，URL 就像正常的 url，只須要在配置路由規則時，加入"mode: 'history'",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

注意:還須要後臺配置支持，若是沒有正確配置會返回404；服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

5.vue-router 有哪幾種導航鉤子?

解釋:vue-router導航鉤子主要用來做用是攔截導航，讓他完成跳轉或取消
1. 全局導航鉤子
全局導航鉤子主要有兩種鉤子：前置守衛、後置鉤子，註冊一個全局前置守衛：

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});
//to: Route，表明要進入的目標，它是一個路由對象
//from: Route，表明當前正要離開的路由，一樣也是一個路由對象
//next: Function，這是一個必須須要調用的方法，而具體的執行效果則依賴 next 方法調用的參數

2. 路由獨享的鉤子
單個路由獨享的導航鉤子，它是在路由配置上直接進行定義的

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
    ]
});

3. 組建內的導航鉤子
組件內的導航鉤子主要有這三種：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他們是直接在路由組件內部直接進行定義的

const File = {
    template: `<div>This is file</div>`,
    beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染該組件的對應路由被 confirm 前調用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在當前路由改變，可是依然渲染該組件是調用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 導航離開該組件的對應路由時被調用
    }
}

6.$route 和 $router 的區別

$route :爲當前router跳轉對象裏面能夠獲取name、path、query、params等

$router :爲VueRouter實例，想要導航到不一樣URL，則使用$router.push方法

返回上一個history也是使用$router.go方法 <img src='https://img2018.cnblogs.com/blog/1918240/202002/1918240-20200222204954826-172762562.png' style='width:400px;height:400px'>

7.vue-router響應路由參數的變化

例如從/user/foo導航到/user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用路由參數的變化做出響應能夠用如下方法：
1.watch監聽,當路由發生變化的時候執行

watch:{

  $route(to,from){

        console.log(to.path);

        // 對路由變化做出響應...

  }

},

2.在父組件的router-view上加個key

<router-view :key="$route.fullPath"></router-view>

8.vue-router實現路由懶加載（動態加載路由）

const Foo = () => import('./Foo.vue')

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

//有時候想把某個路由下的全部組件都打包在同一個異步快中，須要使用命名chunk，一個特殊的註釋語法來提供chunk name（webpack>2.4）

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

原文出處：https://www.cnblogs.com/halfsoul/p/12347148.html