vue-router 官網：
更多的前端專案偏向於單頁面應用程式，基於mvvm模式，單頁面應用程式跳轉不卡頓，切換流暢等；
基礎知識點包括：路由跳轉、路由跳轉傳參、巢狀路由、多檢視、路由守衛等；
vue-router 在專案的引入包含兩種方式：
通過 js 引入
""
>
<
/script>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
>
"/foo"
>
go to foorouter-link
>
"/bar"
>
go to barrouter-link
>
>
router-view
>
div>
src=
"">
script
>
src=
"">
script
>
>
const foo =
const bar =
const routes =[,
,]const router =
newvuerouter()
newvue(,
});script
>
body
>
html
>
"/foo"
>
go to foorouter-link
>
"/bar"
>
go to barrouter-link
>
const foo =,}
}
以 『/bar?param=val』 形式給 bar 元件傳參，bar 元件以 this.$route.query 接收
// foo 元件
const foo =,}
}// bar 元件
const bar =}}
// 路由表
const routes =[,
,]
路由表修改為 『/bar/:id』， 以 『/bar/123』 形式傳參， 以 this.$route.params 接收
// foo 元件
const foo =,}
}// bar 元件
const bar =}}
// 路由表
const routes =[,
,]
foo 元件 與 bar 元件之間的路由切換，為父路由切換；
在 bar 元件中，又有 bar 的子元件 son1 元件 與 son2 元件的切換，稱為子路由切換；
二者共同構成巢狀路由；
// foo 元件
const foo =,}
}// bar 元件
const bar =
const son1component =
const son2component =
// 路由表
const routes =[,
,,,]
},]
>
"/foo"
>
go to foorouter-link
>
"/bar"
>
go to barrouter-link
>
>
router-view
>
name
="footer"
>
router-view
>
div>
// foo 元件
const foo =
// bar 元件
const bar =
const footercomponent =
// 路由表
const routes =[,
,},]
const router =
newvuerouter()
// 頁面滾動、動畫載入、許可權判斷等
router.
beforeeach
((to,
from
, next)
=>
)
Yii2 0隨筆 路由
1 去掉index.php，按照pathinfo模式訪問 例 http com 控制器 方法 1 把web伺服器的 目錄指向所在模組的web目錄 2 在main.php的 components urlmanager enableprettyurl true,3 如果沒有去掉index.php，則we...
vue知識隨筆
很多時候 store.dispatch switch dialog 這種寫法又長又臭 很不方便 我們沒使用 vuex 的時候 獲取乙個狀態只需要 this.show 執行乙個方法只需要 this.switch dialog 就行了 使用 vuex 使寫法變複雜了 使用 mapstate mapget...
vue學習隨筆
1 css與style的物件繫結與陣列繫結 2 v if的key語法 3 v for遍歷物件的三個引數 value key index 4 v for的key就地服用原則 5 v for的優先順序比v if更高 6 單選框的value，多選框的true value與false value 7 表單v...