vue-router 基本使用(一)

一、路由定義理解

       1、路由，其實就是指向，當我點擊頁面home按鈕時，就顯示home內容，點擊about按鈕時就顯示about內容，可以理解爲

home按鈕=>home內容，about按鈕=>about內容的一 一對應的映射關係。

      2、路由中有三個基本的概念 route, routes, router

route:表示一條路由，home按鈕=>home內容是一條路由；

routes:表示一組路由，[{home按鈕=>home內容},{about按鈕=>about}]

router:是一個機制，相當於一個管理者，它來管理路由。因爲routes 只是定義了一組路由，它放在哪裏是靜止的，當真正來了請求，怎麼辦？ 就是當用戶點擊home 按鈕的時候，怎麼辦？這時router 就起作用了，它到routes 中去查找，去找到對應的 home 內容，所以頁面中就顯示了 home 內容。

3、客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候，about 中的內容全部隱藏，反之也是一樣。客戶端路由有兩種實現方式：基於hash 和基於html5 history api.

二、路由安裝

npm install vue-router --save

三、路由的實現

      1、頁面實現（html模板塊）

• 定義點擊部分<router-link></router-link>
• 定義內容顯示部分<router-view></router-view>

   <router-link> 還有一個非常重要的屬性 to，定義點擊之後，要到哪裏去

<router-link  to="/home">Home</router-link>
<router-link  to="/about">About</router-link>
<router-view></router-view>

      2、js配置路由

        首先要定義route,  一條路由的實現。它是一個對象，由兩個部分組成： path和component,  path 指路徑，component 指的是組件，例如配置home和about路徑

const routes = [
    {path:'/home',component:'Home'},
    {path:'/about',component:'About'}
];

     3、創建router，對路由進行管理，由構造函數new VueRouter()創建，接受routes參數

var router = new VueRouter({
    routes     //routes:routes
});

     4.配置完成後，把router實例注入到vue跟實例中，就可以使用路由了

const app = new Vue({
    router
}).$mount("#app");

     整個router.js代碼     

import Home from "./components/Home"
import About from "./components/About"
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter);
//定義路由每個路由應該映射一個組件
const routes = [
    {
        path: "/home",
        name: "home",
        component: Home
      },
    {
        path: '/about',
        name:"about",
        component:About
    }
];

//創建router實例，然後出入'routes'配置
const router = new VueRouter({
    routes:routes
});

export default router;

      5、執行過程

      當用戶點擊<router-link>標籤時,會去尋找它的to屬性，它to屬性和js配置的路徑{path:'/home',component:Home}中的path一 一 對應，從而找到匹配的組件，最後把組件渲染到<router-view>標籤上。

四、源碼下載

https://github.com/wanghongzheng/my_vue

五、效果

原文連接：https://www.cnblogs.com/SamWeb/p/6610733.html，這個講的特別仔細，非常通俗易懂。