摘要:路由基礎使用插件處理路由,路由是開發單頁應用必須掌握的知識。什么是是官方提供前端路由插件,借助它我們實現可以基于路由和組件的單頁面應用。子路由前面不能有。命名路由路由對象中的屬性是路由的名字,可用該名字指定路徑。
vue 路由基礎
vue 使用 vue-router 插件處理路由,路由是開發單頁應用必須掌握的知識。
什么是 vue-router?(1)vue-router 是 Vue 官方提供前端路由插件,借助它我們實現可以基于路由和組件的單頁面應用。
(2)它與傳統的頁面區別在于:
傳統的頁面應用采用的是后端路由,即通過超鏈接來實現頁面切換和跳轉的。
而在 vue-router 單頁面應用中,則是通過路徑之間的切換(實際上就是組件的切換)。
router-link 和 router-view 組件router-link 是一個a(鏈接)標簽的封裝,router-view 是路由視圖,渲染 router-link 匹配到的組件,可配合使用
更多詳細信息
路由配置 動態路由$route 是當前路由,可用 watch在組件中監它的變化,有一個 params 屬性,值一個包含動態路由的對象。
</>復制代碼
watch: {
"$route"(to) {
console.log(to);
//將路由的 params 屬性賦值給組件的 data 屬性
to.params && to.params.view && (this.effect = to.params.view)
},
}
route 和 router 的區別
路由對象為:
</>復制代碼
{
path:"/argu/:name",
// 使用 import 動態引入路徑對應的組件,起到懶加載的作用
component:()=>import("@/views/ArguPage")
}
可在該路由的組件中這樣獲取name的值:
</>復制代碼
$route.params.name //給同一個組件設置傳遞不同的params,實現組件的復用
嵌套路由
在路由對象中添加一個 children 屬性,值是一個數組,可包含多個子路由。子路由 path 前面不能有 / 。 父級路由對應的組件必須有路由出口,即 router-view。
命名路由路由對象中的 name 屬性是路由的名字,可用該名字指定路徑。
在 router-link 的 to 屬性動態綁定 路由對象。
命名視圖</>復制代碼
route-view 是路由視圖,只有一個視圖時,路由匹配的組件在該視圖中渲染,多個視圖則要對視圖進行命名。
</>復制代碼
路由對象:
</>復制代碼
{
path:"/name/view",
name:"name_view",
// 注意命名視圖的 components 和 組件的 component 的區別
components:{
// 不給 router-view 設置 name 屬性,name 值就是 default
default:()=>import("@/views/ChildPage"),
sister:()=>import("@/views/SisterPage"),
brother:()=>import("@/views/BrotherPage"),
}
}
JS 操作路由
路由對象 $router 有多個函數push 、 go 、 replace
push 可導航到不同的頁面,會將該路徑進入歷史記錄。
$router.push 和 window.history.pushSate 一樣。
push 可接受不同的參數:
</>復制代碼
//字符串路徑
this.$router.push("home")
// 路由對象
this.$router.push({path:"home"})
// 命名路由加參數
this.$router.push({name:"argu",params:{name:"jack"}})
// path 路由和 query
this.$router.push({path:"argu",query:{name:"jack"}});
// path 和 params 不可一起使用,params 會被忽略
this.$router.push({path:"argu",params:{name:"jack"}});
this.$router.push({name:"argu",query:{name:"jack"}});
go 的參數是一個整數,表示回退或者前進多少歷史記錄。
</>復制代碼
// 在瀏覽器記錄中前進一步,等同于 history.forward()
$router.go(1)
// 后退一步記錄,等同于 history.back()
$router.go(-1)
// 前進 3 步記錄
$router.go(3)
// 如果 history 記錄不夠用,那就默默地失敗唄
$router.go(-100)
$router.go(100)
router.replace(location) = window.history.replaceState
跟 router.push 很像,唯一的不同就是,它不會向 history 添加新記錄,而是跟它的方法名一樣 —— 替換掉當前的 history 記錄
使用場景:不需要用戶回退的情況,比如權限驗證。
</>復制代碼
// 路由名字
this.$router.replace("name_view");
// 字符串路徑
this.$router.replace("/name/view");
// 路由對象
this.$router.replace({path:"/name/view"});
// 命名路由帶 params
this.$router.replace({name:"name_view",params:{age:24}});
// path 和 query
this.$router.replace({path:"name_view",query:{age:24}});
// this.$router.replace({path:"/name/view",params:{age:24}});
重定向和別名
</>復制代碼
// 路由重定向:訪問 /index ,重定向到 /
{
path:"/index",
redirect:"/"
}
redirect 也可設置一個對象:
</>復制代碼
{
path:"/index",
redirect:{
name:"home"
}
}
redirect 還可以設置為一個函數,傳遞一個參數 to,可根據該對象的不同值,重定向到不同的頁面,返回一個 命名路由 或者 字符串路徑 。
</>復制代碼
{
path:"/index",
redirect:to=>{
// do something with to
return {
name:"home"
}
}
}
to 是一個包含路徑參數的對象:
</>復制代碼
{
name: "index",
meta: {},// 路由元數據,可在全局導航守衛中獲取該對象,然后不同頁面設置不同的值,比如設置頁面的標題
path: "/index", // 路由路徑 解析為絕對路徑 /a/b
hash: "", // 書簽
query: {}, // 查詢參數 /a?user=jack, $route.query.uer 的值為 jack
params: {}, //
fullPath: "/index", // 完整路徑
matched: [{ // 當前路由的所有嵌套路徑片段的路由記錄,路由記錄就是路由的副本。
path: "/index",
regex: {
keys: []
},
components: {},
instances: {},
name: "index",
meta: {},
props: {}
}],
redirectedForm:""http:// 重定向來源的名字
}
</>復制代碼
router.beforeEach((to, from, next) => {
console.log("①,全局前置守衛,beforeEach");
//給每個頁面設置不同的標題,標題就從 meta 中獲取
//setTitle = (title)=>{
// window.document.title=title||"admin"
//}
to.meta && setTitle(to.meta.title);
next(()=>{
console.log("②,全局前置守衛,beforeEach");
});
});
路徑別名
</>復制代碼
{
name: "home",
alias:"home_page",// 路徑別名
path: "/",
component: Home
}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104754.html
摘要:你可以在創建實例的時候,在配置中給某個路由設置名稱。如果沒有設置名字,那么默認為。 Vue.js路由(Vue-router) 安裝 直接引入 vue-router下載鏈接https://unpkg.com/vue-router/... npm下載 npm install vue-router 如果在一個模塊化工程中使用它,必須要通過 Vue.use() 明確地安裝路由功能:在你的文...
摘要:路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監測值變化,可以在對象上監聽這個事件。這兩個方法應用于瀏覽器記錄棧,在當前已有的基礎之上,它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器,這里的路由就是SPA(單頁應用)的路徑管理器。再通俗的說,vue-router就是WebApp的鏈接路徑管理系統。vue-router是...
摘要:那么這個時候,我們需要在中,加載配置三個組件為復數。傳遞參數不需要在中進行配置獲取參數其他的寫法帶查詢參數,下面的結果為拼到中 什么是 Vue Router? Vue Router是Vue.js的官方路由管理器,可以控制Vue單頁應用的路由。 如何快速上手? vue-cli腳手架自帶Vue-Router依賴 新版的vue-cli腳手架中,默認default模式沒有router依賴,請選...
摘要:具體實現請查看和的退出登陸回調方法。現在除了必要的頁面需要在一開始添加到路由表里,其他的頁面都可以根據后臺數據來自動生成。另外,如果在未登陸時要訪問某一指定頁面,會重定向到登陸頁,登陸成功后會自動跳到這個指定頁面。 項目地址 vue-admin-template 在線預覽 更新 2019.6.25 更新 修復路由表沖突問題 退出當前用戶,換賬號重新登陸時,上個賬號和現在的賬號路由表會有...
摘要:而路由則是使用了中新增的事件和事件。總結這一章主要是介紹了如何使用在中構建我們的前端路由。 系列目錄地址 一、基礎知識概覽 第一章 - 一些基礎概念(posted at 2018-10-31) 第二章 - 常見的指令的使用(posted at 2018-11-01) 第三章 - 事件修飾符的使用(posted at 2018-11-02) 第四章 - 頁面元素樣式的設定(posted a...
閱讀 1369·2019-08-30 15:44
閱讀 2114·2019-08-30 11:04
閱讀 530·2019-08-29 15:17
閱讀 2552·2019-08-26 12:12
閱讀 3140·2019-08-23 18:09
閱讀 931·2019-08-23 15:37
閱讀 1530·2019-08-23 14:43
閱讀 2934·2019-08-23 13:13