1.this. $router.push( )
跳轉(zhuǎn)到指定的URL佛呻，在history棧中添加一個記錄，點擊后退會返回上一個頁面撞羽。
1. 不帶參數(shù)
// 字符串
this.$router.push('/home')
this.$router.push('/home/first')
// 對象
this.$router.push({path:'/home'})
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({name:'home'})
2. query傳參
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取參 $route.query.id
// script 取參 this.$route.query.id
3. params傳參
this.$router.push({name:'home',params: {id:'1'}})
// 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
4. query和params區(qū)別
query類似 get, 跳轉(zhuǎn)之后頁面 url后面會拼接參數(shù),類似?id=1, 非重要性的可以這樣傳,
密碼之類還是用params刷新頁面id還在
params類似 post, 跳轉(zhuǎn)之后頁面 url后面不會拼接參數(shù) , 但是刷新頁面id 會消失
2.this. $router.replace( )
用法同上,但是跳轉(zhuǎn)到指定的url允瞧，不會向history里面添加新的記錄，點擊返回泌绣，會跳轉(zhuǎn)到上上一個頁面，上一個記錄是不存在的预厌。
3.聲明式路由跳轉(zhuǎn) router-link
瀏覽器在解析時阿迈，將它解析成一個類似于a標(biāo)簽。
router-link：可以一個組件轧叽，當(dāng)服務(wù)器的數(shù)據(jù)返回之后苗沧，循環(huán)很多的router-link組件【創(chuàng)建組件實例的】1000+，創(chuàng)建組件實例的時候炭晒，一瞬間創(chuàng)建1000+很耗內(nèi)存的待逞，因此出現(xiàn)卡頓現(xiàn)象
基本用法
<li>
<router-link to="/home/first">點擊跳轉(zhuǎn)</router-link>
</li>
1. 不帶參數(shù)
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'网严，則從當(dāng)前路由開始识樱。
2. 帶參數(shù)
<router-link :to="{name:'home', params: {id:1}}">
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query傳參數(shù) (類似get,url后面會顯示參數(shù))
// 路由可不配置
// html 取參 $route.query.id
// script 取參 this.$route.query.id
4.this. $router.go(n)
相對于當(dāng)前頁面向前或向后跳轉(zhuǎn)多少個頁面,類似 window.history.go(n)。n可為正數(shù)可為負(fù)數(shù)震束。正數(shù)返回上一個頁面怜庸。
this. $router.go(1) //前進一步 相當(dāng)于history.forward()
this. $router.go(-1) //后退一步 相當(dāng)于history.back()
this. $router.go(10)
獲取參數(shù)
this.$route.query.id
this.$route.parpms.id
