摘要：提供了兩種向組件傳遞參數的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。

一、vue-router 1、簡介

我們經常使用vue開發單頁面應用程序（SPA）。在開發SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像是一個頁面，其實是在一個頁面中切換不同的html部分，從而達到所謂的單頁面,在這切換之中，就需要使用路由來實現不同的頁面內容的展現。

2、基本用法 （1）.使用步驟

vue-router的基本使用步驟如下：

定義需要切換的組件

配置路由，規定路徑到組件的映射關系

創建路由實例

將路由掛載到vue實例

//1.定義組件，用于路由切換
var Home = {
    template: "
我是主頁
"
}
var News = {
    template: "
我是新聞
"
}

//2.配置路由
const routes = [{
        path: "/home",
        component: Home
    },{
        path: "/news",
        component: News
    },{ //這一路由配置用于首次訪問或者找不到所請求路由，自動跳轉home頁
        path: "*",
        redirect: "/home"
}];

//3.創建路由實例
var router = new VueRouter({
    routes  //傳入配置好的路由信息
});

//4.掛載路由到根組件
new Vue({
    el: "#app",
    router 
});

這樣我們就配置好了一個完整的路由。在切換組件的時候會根據路由加載不同的組件。我們使用類似a標簽的觸發組件的切換，to屬性存放的是路徑。使用來顯示所切換組件。

    主頁
    新聞

    

這樣我們就可以實現主頁和新聞組件間的切換。

（2）.參數傳遞

可能我們需要向所切換組件傳遞參數。vue提供了兩種向組件傳遞參數的方式。

查詢字符串的形式

/home?name=dawei&pwd=666

在組件內部使用{{$route.query}}接收參數

rest風格

/news/param1/param2

在組件內部使用{{$route.params}}接收參數

（3）.路由嵌套

路由還可以多層嵌套使用，使用children屬性。

{
    path:"/user",
    component:User,
    children:[
        {
            path:"login",  
            component:Login
        },
        {
            path:"regist",
            component:Regist
        }
    ]
}

子路由項路徑不要使用/開頭，以 / 開頭的嵌套路徑會被當作根路徑。

在組件中就可以使用該路由：

    
用戶信息
    

        用戶登陸
        用戶注冊
    
    

注意路徑的寫法。

3、路由實例的方法

這里學習兩個路由實例的方法：router.push()和router.replace()。

router.push()：添加路由，功能上與相同

router.replace()： 替換路由，不產生歷史記錄

router.push({path:"home"})

router.replace({path:"user"})

4、路由結合動畫

路由結合動畫使用很簡單，我們可以用 組件給它添加一些動畫效果：

二、單文件組件 1、.vue文件

.vue文件稱為單文件組件，是Vue.js自定義的一種文件格式，一個.vue文件就是一個多帶帶的組件，在文件內封裝了組件相關的代碼：html、css、js代碼。

.vue文件由三部分組成：