摘要:這些組件會映射到中的中命名路由路由元信息導航鉤子,可以傳遞兩個路由間的數據上面的這個路由配置就對應如下中配置中的組件會映射到這里而最高層級的路由,將會被映射到最頂層的出口,即中以上,就是的基本使用方式,不正確的地方歡迎指出。
1.起步
npm install --save vue-router
在項目中使用時,通過如下方式即可
import Vue from "vue" import VueRouter from "vue-router" //安裝 Vue 的 VueRouter 插件 Vue.use(VueRouter) //創建實例,進行配置 new VueRouter({ //... })
2.路由映射
//router-link 組件實現導航 //to 屬性主要用于指定鏈接to home
會被渲染為
to home
3.路由出口
//路由匹配到的組件會被渲染到這
4.定義路由組件
??首先先明確一點,一般情況下一個路由就映射一個組件。
const routes = [ path: "/", component: require("./app.vue"), //這些組件會映射到 app.vue 中的 router-view 中 children: [ { path: "/", component: require("./home.vue") }, { path: "/questions", component: require("./questions.vue"), name: "questions", // 命名路由 //路由元信息 meta: { correctNum: 0 } }, { path: "score", component: require("../page/score"), name: "score", // 導航鉤子,可以傳遞兩個路由間的數據 beforeEnter (to, from, next) { to.meta.correctNum = from.meta.correctNum next() } } ] ] const router = new VueRouter({ mode: "history", base: __dirname, routes }) new Vue({ //... router })
上面的這個路由配置就對應如下
//app.vue中
而最高層級的路由,將會被映射到最頂層的出口,即 index.html 中
??以上,就是 vue-router 的基本使用方式,不正確的地方歡迎指出。我也做了一個小 demo,詳見 Github。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82410.html
摘要:使用值來作路由。原生應用本身就是多頁的場景,頁面間狀態的隔離比共享更重要一些。使用開發的是原生應用,頁面棧的管理使用的也是原生的特性,沒有但是有模塊可以實現頁面的前進和后退等操作。 系列文章的目錄在 ? 這里 (由于 我比較懶 最近一段時間在忙其他事,系列文章拖了好久終于又更新了。。。) 什么是 vue-router ? vue-router 官方文檔 vue-router 是針對 V...
摘要:路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監測值變化,可以在對象上監聽這個事件。這兩個方法應用于瀏覽器記錄棧,在當前已有的基礎之上,它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器,這里的路由就是SPA(單頁應用)的路徑管理器。再通俗的說,vue-router就是WebApp的鏈接路徑管理系統。vue-router是...
摘要:路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由,然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面,通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么?為什么我們不能像原來一樣直接用標簽編寫鏈接哪?vue-router如何使用?常見路由操作有哪些?等等這些問...
摘要:路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由,然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面,通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么?為什么我們不能像原來一樣直接用標簽編寫鏈接哪?vue-router如何使用?常見路由操作有哪些?等等這些問...
摘要:路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由,然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面,通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么?為什么我們不能像原來一樣直接用標簽編寫鏈接哪?vue-router如何使用?常見路由操作有哪些?等等這些問...
閱讀 848·2021-11-25 09:43
閱讀 3681·2021-11-19 09:40
閱讀 882·2021-09-29 09:34
閱讀 1784·2021-09-26 10:21
閱讀 870·2021-09-22 15:24
閱讀 4188·2021-09-22 15:08
閱讀 3266·2021-09-07 09:58
閱讀 2658·2019-08-30 15:55