資訊專欄INFORMATION COLUMN
摘要：第一步路由配置項(xiàng)第二步路由映射全部精華路由參數(shù)是路由參數(shù)。和這兩行代碼，使用了用了具名路徑。對(duì)應(yīng)路由配置中的，使用接收參數(shù)。
參考
vue-router文檔
使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用 vue-router
Vue.js——vue-router 60分鐘快速入門
Demo:https://github.com/keepfool/vue-tutorials/blob/master/06.Router/basic/basic_04.html
路由配置其實(shí)是分兩步的，第一步把vue-router的指令方法掛到Vue實(shí)例，第二步才是添加路由配置上。
import Vue from "vue"
import VueRouter from "vue-router"
import App from "App.vue"
Vue.use(VueRouter) // 第一步
//路由配置項(xiàng):http://router.vuejs.org/zh-cn/options.html
const router = new VueRouter({
hashbang = true,
abstract = false,
history = true,
saveScrollPosition = true,
transitionOnLoad = false,
suppressTransitionError = false,
root = null,
linkActiveClass = "v-link-active"
}) // 第二步
//路由映射: http://router.vuejs.org/zh-cn/api/map.html
router.map({
"/": {
name: "index",
title: "全部",
component: (resolve) => require(["./components/main/index.vue"], resolve)
},
"/good": {
name: "good",
title: "精華",
component: (resolve) => require(["./components/main/index.vue"], resolve)
}
})
router.start(App, "#app")
路由參數(shù)
import Home from "components/Home"
import News from "components/News"
import NewsDetail from "components/NewsDetail"
import Message from "components/Message"
import About from "components/About"
router.map({
"/home": {
component: Home,
subRoutes: {
"/news": {
name: "news",
component: News,
subRoutes: {
"detail/:id": {
name: "detail",
component: NewsDetail
}
}
},
"/message": {
component: Message
}
}
},
"/about": {
component: About
}
})
/:id是路由參數(shù)。例如：如果要查看id = "01"的News詳情，那么訪問(wèn)路徑是/home/news/detail/01。
News和News 01這兩行HTML代碼，使用了用了具名路徑。
params: {id: "01"}對(duì)應(yīng)路由配置中的/:id，使用this.$route.parames.id接收params參數(shù)。
也可使用query: {id: "01"}傳參，然后使用this.$route.query.id接收參數(shù)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80505.html
vue-router使用步驟(本教程并不全面，只研究到了本人夠用的程度，如果還想要深入了解路由，請(qǐng)?jiān)趘ue router 文檔中學(xué)習(xí))： 手動(dòng)： npm 安裝 vue-router npm install vue-router 配置路由 1. 在main.js同級(jí)目錄下（目錄結(jié)構(gòu)不一定要和我完全一樣）新建router.js； 2. 在router.js中引用vue 和 vue-route...
摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...
摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...
摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...
摘要：重定向可以實(shí)現(xiàn)某些需要根據(jù)特定邏輯改變頁(yè)面原本路由的需求，例如簡(jiǎn)單的未登錄狀態(tài)下的頁(yè)面訪問(wèn)個(gè)人信息路由時(shí)應(yīng)該重定向到登錄路由頁(yè)面。 前言 為了給讀者更好的體驗(yàn)，去理解vue-router和下一篇介紹vuex，決定還是來(lái)一個(gè)實(shí)戰(zhàn)教程來(lái)帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網(wǎng)下載npm和node，附：npm官網(wǎng) 項(xiàng)目構(gòu)建 這里我采用vue-cli+web...
閱讀 1203·2021-11-23 10:10
閱讀 1548·2021-09-30 09:47
閱讀 931·2021-09-27 14:02
閱讀 3007·2019-08-30 15:45
閱讀 3045·2019-08-30 14:11
閱讀 3639·2019-08-29 14:05
閱讀 1845·2019-08-29 13:51
閱讀 2236·2019-08-29 11:33
