vue-router 基礎知識點

vue-router

這裏的路由並非指咱們平時所說的硬件路由器，這裏的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的連接路徑管理系統。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超連接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是創建起url和頁面之間的映射關係。

至於咱們爲啥不能用a標籤，這是由於用Vue作的都是單頁應用（當你的項目準備打包時，運行 npm run build時，就會生成dist文件夾，這裏面只有靜態資源和一個index.html頁面），因此你寫的標籤是不起做用的，你必須使用vue-router來進行管理。

vue-router實現原理

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

1. Hash模式：

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。hash（#）是URL 的錨點，表明的是網頁中的一個位置，單單改變#後的部分，瀏覽器只會滾動到相應位置，不會從新加載網頁，也就是說hash 出如今 URL 中，但不會被包含在 http 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面；同時每一次改變#後的部分，都會在瀏覽器的訪問歷史中增長一個記錄，使用」後退」按鈕，就能夠回到上一個位置；因此說Hash模式經過錨點值的改變，根據不一樣的值，渲染指定DOM位置的不一樣數據。hash 模式的原理是 onhashchange 事件(監測hash值變化)，能夠在 window 對象上監聽這個事件。

1. History模式：

因爲hash模式會在url中自帶#，若是不想要很醜的 hash，咱們能夠用路由的 history 模式，只須要在配置路由規則時，加入"mode: 'history'",這種模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器記錄棧，在當前已有的 back、forward、go 基礎之上，它們提供了對歷史記錄修改的功能。只是當它們執行修改時，雖然改變了當前的 URL ，但瀏覽器不會當即向後端發送請求。

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，比較好看！ 不過這種模式要玩好，還須要後臺配置支持。由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就很差看了。
因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}
]

此處就設置若是URL輸入錯誤或者是URL 匹配不到任何靜態資源，就自動跳到到Home頁面

使用路由模塊來實現頁面跳轉的方式

1.直接修改地址欄
2.this.$router.push(‘路由地址’)
3.<router-linkto="路由地址"></router-link>

vue-router使用方式

1. 下載 npm i vue-router-S
2. 在main.js中引入 importVueRouterfrom'vue-router';
3. 安裝插件 Vue.use(VueRouter);
4. 建立路由對象並配置路由規則

let router = new VueRouter({routes:[{path:'/home',component:Home}]});

1. 將其路由對象傳遞給Vue的實例，options中加入 router:router
2. 在app.vue中留坑 <router-view></router-view>

具體實現請看以下代碼：

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主體
import App from './components/app.vue';
import Home from './components/home.vue'
//安裝插件
Vue.use(VueRouter); //掛載屬性
//建立路由對象並配置路由規則
let router = new VueRouter({
  routes: [
    //一個個對象
    { path: '/home', component: Home }
  ]
});
//new Vue 啓動
new Vue({
  el: '#app',
  //讓vue知道咱們的路由規則
  router: router, //能夠簡寫router
  render: c => c(App),
})

在app.vue中「留坑」

//app.vue中
<template>
  <div>
    <!-- 留坑 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data(){
    return {}
  }
}
</script>

vue-router參數傳遞

明式的導航 <router-link:to="...">和編程式的導航 router.push(...)均可以傳參，本文主要介紹前者的傳參方法，一樣的規則也適用於編程式的導航。

1. 用name傳遞參數

在路由文件src/router/index.js裏配置name屬性

routes: [
  {
    path: '/',
    name: 'Hello',
    component: Hello
  }
]

模板裏(src/App.vue)用 $route.name來接收 
好比： <p>{{ $route.name}}</p>

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

基本語法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

在src/App.vue文件中

<router-link :to="{name:'hi1',params:{username:'jsp',id:'555'}}">頁面1</router-link>

而後把src/router/index.js文件裏給hi1配置的路由起個name,就叫hi1

{path:'/hi1',name:'hi1',component:Hi1}

最後在模板裏(src/components/Hi1.vue)用 $route.params.username進行接收

{{$route.params.username}}-{{$route.params.id}}

1. 利用url傳遞參數----在配置文件裏以冒號的形式設置參數

/src/router/index.js文件裏配置路由

{
  path:'/params/:newsId/:newsTitle',
  component:Params
}

1. 使用path來匹配路由，而後經過query來傳遞參數

<router-link :to="{ name:'Query',query: { queryId: status }}" >
  router-link跳轉
</router-link>

對應路由配置：

{
  path: '/query',
  name: 'Query',
  component: Query
}

獲取參數：

this.$route.query.queryId

vue-router配置子路由(二級路由)

導航連接:

<router-link :to="{name:'HelloWorld'}">主頁</router-link>
<router-link :to="{name:'H1'}">頁面一</router-link>
<router-link :to="{name:'H2'}">頁面二</router-link>

在HelloWorld.vue加入 <router-view>標籤，給子模板提供插入位置

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>

在components目錄下新建兩個組件模板 H1.vue 和 H2.vue

再修改router/index.js代碼，子路由的寫法是在原有的路由配置下加入children字段

routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld,
    children: [{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必須在HelloWorld.vue中出現
      {path: '/h2', name: 'H2', component: H2}
    ]
  }
]