什么是路由

1. 對于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對應(yīng)服務(wù)器上對應(yīng)的資源；

2. 對于單頁面應(yīng)用程序來說，主要通過URL中的hash(#號)來實現(xiàn)不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關(guān)的內(nèi)容；所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)；

3. 在單頁面應(yīng)用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區(qū)別于后端路由）；

在 vue 中使用 vue-router

1. 導(dǎo)入 vue-router 組件類庫：

<!-- 1. 導(dǎo)入 vue-router 組件類庫 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

2. 使用 router-link 組件來導(dǎo)航

<!-- 2. 使用 router-link 組件來導(dǎo)航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>

3. 使用 router-view 組件來顯示匹配到的組件

<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>

4. 創(chuàng)建使用Vue.extend創(chuàng)建組件

    // 4.1 使用 Vue.extend 來創(chuàng)建登錄組件
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });

    // 4.2 使用 Vue.extend 來創(chuàng)建注冊組件
    var register = Vue.extend({
      template: '<h1>注冊組件</h1>'
    });

5. 創(chuàng)建一個路由 router 實例，通過 routers 屬性來定義路由匹配規(guī)則

// 創(chuàng)建一個路由 router 實例，通過 routers 屬性來定義路由匹配規(guī)則
//創(chuàng)建一個路由對象， 當(dāng) 導(dǎo)入 vue-router 包之后，在 window 全局對象中，就有了一個 路由的構(gòu)造函數(shù)，叫做 VueRouter
    // 在 new 路由對象的時候，可以為 構(gòu)造函數(shù)，傳遞一個配置對象
    var routerObj = new VueRouter({
      // route // 這個配置對象中的 route 表示 【路由匹配規(guī)則】 的意思
      routes: [ // 路由匹配規(guī)則 
        // 每個路由規(guī)則，都是一個對象，這個規(guī)則對象，身上，有兩個必須的屬性：
        //  屬性1 是 path， 表示監(jiān)聽 哪個路由鏈接地址；
        //  屬性2 是 component， 表示，如果 路由是前面匹配到的 path ，則展示 component 屬性對應(yīng)的那個組件
        // 注意： component 的屬性值，必須是一個 組件的模板對象， 不能是 組件的引用名稱；
        // { path: '/', component: login },
        { path: '/', redirect: '/login' }, // 這里的 redirect 和 Node 中的 redirect 完全是兩碼事
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

6. 使用 router 屬性來使用路由規(guī)則

// 6. 創(chuàng)建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規(guī)則
    });

設(shè)置路由高亮

設(shè)置路由切換動效

在路由規(guī)則中定義參數(shù)

1. 在規(guī)則中定義參數(shù)：

<!-- 如果在路由中，使用 查詢字符串，給路由傳遞參數(shù)，則 不需要修改 路由規(guī)則的 path 屬性 -->
 <!--   <router-link to="/login?id=10&name=zs">登錄</router-link>--> 
 <!--console.log(this.$route.query.id)獲取查詢字符串傳參-->
{ path: '/register/:id', component: register }

2. 通過 this.$route.params來獲取路由中的參數(shù)：

var register = Vue.extend({
      template: '<h1>注冊組件 --- {{this.$route.params.id}}</h1>'
    });

使用 children 屬性實現(xiàn)路由嵌套

  <div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的組件
    const account = Vue.extend({
      template: `<div>
        這是account組件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    // 子路由中的 login 組件
    const login = Vue.extend({
      template: '<div>登錄組件</div>'
    });

    // 子路由中的 register 組件
    const register = Vue.extend({
      template: '<div>注冊組件</div>'
    });

    // 路由實例
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 實現(xiàn)路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通過 children 數(shù)組屬性，來實現(xiàn)路由的嵌套
// 使用 children 屬性，實現(xiàn)子路由，同時，子路由的 path 前面，不要帶 / ，否則永遠(yuǎn)以根路徑開始請求，這樣不方便我們用戶去理解URL地址
            { path: 'login', component: login }, // 注意，子路由的開頭位置，不要加 / 路徑符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 創(chuàng)建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

命名視圖實現(xiàn)經(jīng)典布局

1. 標(biāo)簽代碼結(jié)構(gòu)：

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>

2. JS代碼：

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 創(chuàng)建路由對象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 創(chuàng)建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

3. CSS 樣式：

  <style>
    .header {
      border: 1px solid red;
    }

    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>

nrm的安裝使用

作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時候的服務(wù)器地址；
什么是鏡像：原來包剛一開始是只存在于國外的NPM服務(wù)器，但是由于網(wǎng)絡(luò)原因，經(jīng)常訪問不到，這時候，我們可以在國內(nèi)，創(chuàng)建一個和官網(wǎng)完全一樣的NPM服務(wù)器，只不過，數(shù)據(jù)都是從人家那里拿過來的，除此之外，使用方式完全一樣；

1. 運行npm i nrm -g全局安裝nrm包；
2. 使用nrm ls查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址；
3. 使用nrm use npm或nrm use taobao切換不同的鏡像源地址；

相關(guān)文件

1. URL中的hash（井號）