1.什么是路由
路由的單詞是router
在前端幫助我們進(jìn)行頁面之間的跳轉(zhuǎn)
router-Link就相當(dāng)于是 a 鏈接 to 屬性規(guī)
定跳轉(zhuǎn)到那個(gè)路徑
知道跳轉(zhuǎn)到那個(gè)頁面后 還學(xué)要配置路由規(guī)則 規(guī)定那個(gè)路徑下加載那個(gè)組件 router/index
需要一個(gè)坑加載頁面
2.路由跳轉(zhuǎn)的兩種方式
1.router-Link 幫助我們跳轉(zhuǎn)頁面
2.編程式導(dǎo)航 就是用 js 的代碼實(shí)現(xiàn)路由跳轉(zhuǎn)
this.$router.push("/page")
完整寫法是一個(gè)大括號 里面可以用path 也能用name跳
this.$router.push({path:"/page"})
this.$router.push({name:"page"})
還有方法叫做
this.$router.replace()
這個(gè)方法不保留歷史記錄
3.路由的傳參
在跳轉(zhuǎn)路由的時(shí)候我們可以攜帶一個(gè)參數(shù)傳遞
我們再跳轉(zhuǎn)一個(gè)頁面的時(shí)候可以攜帶一個(gè)信息 這個(gè)頁面拿到信息 就能判斷是從哪里跳轉(zhuǎn)的一般傳id值
路由的傳參有三種：
第一種是query
在列表頁傳：
this.$router.push({path:"/detail",query:{id:id}})
在詳情頁接收：
在data里定義
id:this.$route.query.id
第二種是params
在列表頁傳：
this.$router.push({name:"detail",params:{id:id}})
這里只能name跳轉(zhuǎn)
在詳情頁接收
id:this.$route.params.id
第三種是動態(tài)路由傳參這里就不說了稍刀。矮燎。
4.
$router是路由的實(shí)例對象 有跳轉(zhuǎn)的方法 比如說push go
$route是路由的信息對象 有路徑 有name還有參數(shù)
還有兩個(gè)返回上一頁用到的跳轉(zhuǎn)‘
this.$router.back()
或
this.$router.go(-1)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
