摘要:可以從其他文件進(jìn)來(lái)定義路由每個(gè)路由應(yīng)該映射一個(gè)組件。其中可以是通過(guò)創(chuàng)建的組件構(gòu)造器,或者,只是一個(gè)組件配置對(duì)象。我們晚點(diǎn)再討論嵌套路由。通過(guò)訪問(wèn)組件實(shí)例更新的時(shí)候路由離開以通過(guò)來(lái)取消。路由懶加載參考路由懶加載
起步
HTML
Hello App!
Go to Foo Go to Bar
JavaScript
// 0. 如果使用模塊化機(jī)制編程,導(dǎo)入Vue和VueRouter,要調(diào)用 Vue.use(VueRouter) // 1. 定義 (路由) 組件。 // 可以從其他文件 import 進(jìn)來(lái) const Foo = { template: "foo" } const Bar = { template: "bar" } // 2. 定義路由 // 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是 // 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器, // 或者,只是一個(gè)組件配置對(duì)象。 // 我們晚點(diǎn)再討論嵌套路由。 const routes = [ { path: "/foo", component: Foo }, { path: "/bar", component: Bar } ] // 3. 創(chuàng)建 router 實(shí)例,然后傳 `routes` 配置 // 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧。 const router = new VueRouter({ routes // (縮寫) 相當(dāng)于 routes: routes }) // 4. 創(chuàng)建和掛載根實(shí)例。 // 記得要通過(guò) router 配置參數(shù)注入路由, // 從而讓整個(gè)應(yīng)用都有路由功能 const app = new Vue({ router }).$mount("#app") // 現(xiàn)在,應(yīng)用已經(jīng)啟動(dòng)了!
通過(guò)注入路由器,我們可以在任何組件內(nèi)通過(guò) this.$router 訪問(wèn)路由器,也可以通過(guò) this.$route 訪問(wèn)當(dāng)前路由:
export default { computed: { username () { // 我們很快就會(huì)看到 `params` 是什么 return this.$route.params.username } }, methods: { goBack () { window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/") } } }routes 選項(xiàng) (Array) redirect(重定向 )
//此時(shí)訪問(wèn)/a會(huì)跳轉(zhuǎn)到/b const router = new VueRouter({ routes: [ { path: "/a", redirect: "/b" } ] }) //重定向的目標(biāo)也可以是一個(gè)命名的路由: const router = new VueRouter({ routes: [ { path: "/a", redirect: { name: "foo" }} ] }) //甚至是一個(gè)方法,動(dòng)態(tài)返回重定向目標(biāo): const router = new VueRouter({ routes: [ { path: "/a", redirect: to => { // 方法接收 目標(biāo)路由 作為參數(shù) // return 重定向的 字符串路徑/路徑對(duì)象 }} ] })命名路由
export default [ { path:"/", redirect:"/app" //默認(rèn)跳轉(zhuǎn)路由 }, { path: "/app", //路由命名,可用于跳轉(zhuǎn) name: "app", } ] //可用于跳轉(zhuǎn)路由元信息app
定義路由的時(shí)候可以配置 meta 字段:
export default [ { path:"/", redirect:"/app" //默認(rèn)跳轉(zhuǎn)路由 }, { path: "/app", //**相當(dāng)于HTML的meta標(biāo)簽** meta: { title: "this is app", description: "asdasd" }, } ]嵌套路由
export default [ { path:"/", redirect:"/app" //默認(rèn)跳轉(zhuǎn)路由 }, { path: "/app", //子路由 匹配 /app/test children: [ { path: "test", component: Login } ] } ]路由組件傳參
export default [ { path:"/", redirect:"/app" //默認(rèn)跳轉(zhuǎn)路由 }, { path: "/app/:id", // /app/xxx ,組件內(nèi)部可以通過(guò)$route.params.id拿到這個(gè)值 // 會(huì)把:后面的參數(shù)通過(guò)props傳遞給組件Todozhong 中 //布爾模式 props: true, //對(duì)象模式 props:{id:456} //函數(shù)模式 props: (route) => ({ id: route.query.b }), component: Todo, } ]mode選項(xiàng)(string)
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL,于是當(dāng) URL 改變時(shí),頁(yè)面不會(huì)重新加載。
如果不想要很丑的 hash,我們可以用路由的 history 模式,這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。
const router = new VueRouter({ mode: "history", routes: [...] })
這種模式要玩好,還需要后臺(tái)配置支持。
base(string)應(yīng)用的基路徑。例如,如果整個(gè)單頁(yè)應(yīng)用服務(wù)在 /app/ 下,然后 base 就應(yīng)該設(shè)為 "/app/"
return new Router({ routes, mode: "history",//默認(rèn)使用hash# base: "/base/", //在path前面都會(huì)加上/base/,基路徑 })linkActiveClass(string)
默認(rèn)值: "router-link-active"
全局配置
return new Router({ routes, mode: "history",//默認(rèn)使用hash# base: "/base/", //在path前面都會(huì)加上/base/,基路徑 // 點(diǎn)擊calss名字 linkActiveClass: "active-link", //匹配到其中一個(gè)子集 linkExactActiveClass: "exact-active-link",//完全匹配 })linkExactActiveClass(string)
默認(rèn)值: "router-link-exact-active"
全局配置
路由跳轉(zhuǎn)后是否滾動(dòng)
export default () => { return new Router({ routes, mode: "history",//默認(rèn)使用hash# base: "/base/", //在path前面都會(huì)加上/base/,基路徑 //頁(yè)面跳轉(zhuǎn)是否需要滾動(dòng) /* to:去向路由,完整路由對(duì)象 from:來(lái)源路由 savedPosition:保存的滾動(dòng)位置 */ scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }, }) }parseQuery / stringifyQuery (Function)
/每次import都會(huì)創(chuàng)建一個(gè)router,避免每次都是同一個(gè)router export default () => { return new Router({ routes, mode: "history",//默認(rèn)使用hash# base: "/base/", //在path前面都會(huì)加上/base/,基路徑 // 路由后面的參數(shù)?a=2&b=3,string->object parseQuery (query) { }, //object->string stringifyQuery (obj) { } }) }fallback(boolean)
當(dāng)瀏覽器不支持 history.pushState 控制路由是否應(yīng)該回退到 hash 模式。默認(rèn)值為 true。
如果設(shè)置為false,則跳轉(zhuǎn)后刷新頁(yè)面,相當(dāng)于多頁(yè)應(yīng)用
高級(jí)用法 命名視圖
導(dǎo)航守衛(wèi)const router = new VueRouter({ routes: [ { path: "/", components: { //默認(rèn)組件 default: Foo, //命名組件 a: Bar, b: Baz } } ] })
全局守衛(wèi)
import Vue from "vue" import VueRouter from "vue-router" import App from "./app.vue" import "./assets/styles/global.styl" // const root = document.createElement("div") // document.body.appendChild(root) import createRouter from "./config/router" Vue.use(VueRouter) const router = createRouter() // 全局導(dǎo)航守衛(wèi)(鉤子) // 驗(yàn)證一些用戶是否登錄 router.beforeEach((to, from, next) => { console.log("before each invoked") next() // if (to.fullPath === "/app") { // next({ path: "/login" }) // console.log("to.fullPath :"+to.fullPath ) // } else { // next() // } }) router.beforeResolve((to, from, next) => { console.log("before resolve invoked") next() }) // 每次跳轉(zhuǎn)后觸發(fā) router.afterEach((to, from) => { console.log("after each invoked") }) new Vue({ router, render: (h) => h(App) }).$mount("#root")
路由獨(dú)享的守衛(wèi)
可以在路由配置上直接定義 beforeEnter 守衛(wèi):
export default [ { path:"/", redirect:"/app" //默認(rèn)跳轉(zhuǎn)路由 }, { path: "/app", // 路由獨(dú)享的守衛(wèi)鉤子 beforeEnter(to, from, next) { console.log("app route before enter") next() } component: Todo, } ]
組件內(nèi)的守衛(wèi)
export default { //進(jìn)來(lái)之前 beforeRouteEnter(to, from, next) { // 不!能!獲取組件實(shí)例 `this` // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒(méi)被創(chuàng)建 console.log("todo before enter", this); //todo before enter undefined //可以通過(guò)傳一個(gè)回調(diào)給 next來(lái)訪問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào),并且把組件實(shí)例作為回調(diào)方法的參數(shù)。 next(vm => { // 通過(guò) `vm` 訪問(wèn)組件實(shí)例 console.log("after enter vm.id is ", vm.id); }); }, //更新的時(shí)候 beforeRouteUpdate(to, from, next) { console.log("todo update enter"); next(); }, // 路由離開 beforeRouteLeave(to, from, next) { console.log("todo leave enter"); const answer = window.confirm("Do you really want to leave? you have unsaved changes!") if (answer) { next() } else { //以通過(guò) next(false) 來(lái)取消。 next(false) } }, props:["id"], components: { Item, Tabs }, mounted() { console.log(this.id) }, };路由懶加載
參考:路由懶加載
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/96850.html
摘要:項(xiàng)目來(lái)源以前曾用過(guò)搭建自己的博客網(wǎng)站,但感覺(jué)很是臃腫。所以一直想自己寫一個(gè)博客內(nèi)容管理器。正好近日看完了各個(gè)插件的文檔,就用著嘗試寫了這個(gè)簡(jiǎn)約的博客內(nèi)容管理器。關(guān)于后端后端是用作為服務(wù)器的,使用了框架。 項(xiàng)目來(lái)源 以前曾用過(guò)WordPress搭建自己的博客網(wǎng)站,但感覺(jué)WordPress很是臃腫。所以一直想自己寫一個(gè)博客內(nèi)容管理器。 正好近日看完了Vue各個(gè)插件的文檔,就用著Vue嘗試寫...
摘要:學(xué)習(xí)筆記狀態(tài)管理與狀態(tài)管理與非父子組件跨級(jí)組件和兄弟組件通信時(shí),使用了中央事件總線的一個(gè)方法,用來(lái)觸發(fā)和接收事件,進(jìn)一步起到通信的作用。倉(cāng)庫(kù)包含了應(yīng)用的數(shù)據(jù)狀態(tài)和操作過(guò)程。新建文件,并寫入的配置,會(huì)依賴此配置文件來(lái)使用編譯代碼。 學(xué)習(xí)筆記:狀態(tài)管理與Vuex 狀態(tài)管理與Vuex 非父子組件(跨級(jí)組件和兄弟組件)通信時(shí),使用了bus(中央事件總線)的一個(gè)方法,用來(lái)觸發(fā)和接收事件,進(jìn)一步...
摘要:路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。模式的原理是事件監(jiān)測(cè)值變化,可以在對(duì)象上監(jiān)聽(tīng)這個(gè)事件。這兩個(gè)方法應(yīng)用于瀏覽器記錄棧,在當(dāng)前已有的基礎(chǔ)之上,它們提供了對(duì)歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時(shí)所說(shuō)的硬件路由器,這里的路由就是SPA(單頁(yè)應(yīng)用)的路徑管理器。再通俗的說(shuō),vue-router就是WebApp的鏈接路徑管理系統(tǒng)。vue-router是...
摘要:提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開頭,以開頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上,是通過(guò)不同的將這些資源加載后打包,然后輸出打包后文件。 一、vue-router 1、簡(jiǎn)介 我們經(jīng)常使用vue開發(fā)單頁(yè)面應(yīng)用程序(SPA)。在開發(fā)SPA過(guò)程中,路由是必不可少的部分,vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來(lái)好像...
摘要:提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開頭,以開頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上,是通過(guò)不同的將這些資源加載后打包,然后輸出打包后文件。 一、vue-router 1、簡(jiǎn)介 我們經(jīng)常使用vue開發(fā)單頁(yè)面應(yīng)用程序(SPA)。在開發(fā)SPA過(guò)程中,路由是必不可少的部分,vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來(lái)好像...
閱讀 2511·2021-09-26 10:18
閱讀 3386·2021-09-22 10:02
閱讀 3183·2019-08-30 15:44
閱讀 3326·2019-08-30 15:44
閱讀 1831·2019-08-29 15:25
閱讀 2572·2019-08-26 14:04
閱讀 2035·2019-08-26 12:15
閱讀 2437·2019-08-26 11:43