成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue學(xué)習(xí)筆記(四)

frank_fun / 2896人閱讀

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

一、vue-router 1、簡介

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

2、基本用法 (1).使用步驟

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

定義需要切換的組件

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

創(chuàng)建路由實例

將路由掛載到vue實例

//1.定義組件,用于路由切換
var Home = {
    template: "
我是主頁
" } var News = { template: "
我是新聞
" } //2.配置路由 const routes = [{ path: "/home", component: Home },{ path: "/news", component: News },{ //這一路由配置用于首次訪問或者找不到所請求路由,自動跳轉(zhuǎn)home頁 path: "*", redirect: "/home" }]; //3.創(chuàng)建路由實例 var router = new VueRouter({ routes //傳入配置好的路由信息 }); //4.掛載路由到根組件 new Vue({ el: "#app", router });

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

主頁 新聞

這樣我們就可以實現(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
        }
    ]
}

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

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

用戶信息

    用戶登陸 用戶注冊

注意路徑的寫法。

3、路由實例的方法

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

router.push():添加路由,功能上與相同

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

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

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

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

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


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

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

.vue文件由三部分組成: