摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開頭，以開頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。

一、vue-router 1、簡介

我們經(jīng)常使用vue開發(fā)單頁面應(yīng)用程序（SPA）。在開發(fā)SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應(yīng)用程序看起來好像是一個(gè)頁面，其實(shí)是在一個(gè)頁面中切換不同的html部分，從而達(dá)到所謂的單頁面,在這切換之中，就需要使用路由來實(shí)現(xiàn)不同的頁面內(nèi)容的展現(xiàn)。

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

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

定義需要切換的組件

配置路由，規(guī)定路徑到組件的映射關(guān)系

創(chuàng)建路由實(shí)例

將路由掛載到vue實(shí)例

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

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

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

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

這樣我們就配置好了一個(gè)完整的路由。在切換組件的時(shí)候會(huì)根據(jù)路由加載不同的組件。我們使用類似a標(biāo)簽的觸發(fā)組件的切換，to屬性存放的是路徑。使用來顯示所切換組件。

    主頁
    新聞

    

這樣我們就可以實(shí)現(xiàn)主頁和新聞組件間的切換。

（2）.參數(shù)傳遞

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

查詢字符串的形式

/home?name=dawei&pwd=666

在組件內(nèi)部使用{{$route.query}}接收參數(shù)

rest風(fēng)格

/news/param1/param2

在組件內(nèi)部使用{{$route.params}}接收參數(shù)

（3）.路由嵌套

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

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

子路由項(xiàng)路徑不要使用/開頭，以 / 開頭的嵌套路徑會(huì)被當(dāng)作根路徑。

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

    
用戶信息
    

        用戶登陸
        用戶注冊
    
    

注意路徑的寫法。

3、路由實(shí)例的方法

這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法：router.push()和router.replace()。

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

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

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

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

4、路由結(jié)合動(dòng)畫

路由結(jié)合動(dòng)畫使用很簡單，我們可以用 組件給它添加一些動(dòng)畫效果：

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

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

.vue文件由三部分組成：