一文詳解vue路由跳轉-參數傳遞與接收

#路由跳轉

#1.宣告式路由跳到

#（不含參數）透過router-link標籤進行跳轉，使用
name或path都可以，在dom結構中會被渲染成a

標籤

注意：router-link中連結如果是'

/

'開始就是從根路由開始，如果開始不帶'
/'，則從目前路由開始。

     <router-link :to="{name:&#39;home&#39;}"> 
	 <router-link :to="{path:&#39;/home&#39;}">

（帶參數）【相關推薦：vue.js影片教學
】注意：
##params傳參數(類似post
) 路由設定path: "/home/:id"

不設定
path，路由跳轉可請求，刷新頁面傳遞的參數會遺失， 設定path，刷新也買你id會被保留<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;router-link :to=&quot;{name:&amp;#39;home&amp;#39;, params: {id:1}}&quot;&gt;</pre><div class="contentsignin">登入後複製</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;router-link :to=&quot;{name:&amp;#39;home&amp;#39;, query: {id:1}}&quot;&gt;</pre><div class="contentsignin">登入後複製</div></div>取得路由跳轉傳遞的參數：html

透過

$route.params.id，script

透過

this.$route.params.id

2.編程式路由跳轉

1.字串形式<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">router.push('home')</pre><div class="contentsignin">登入後複製</div></div>2.物件形式

router.push({ path: 'home' })router.push({ name: 'user'})

3.函數內呼叫（不含參數）

this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})

（query
傳參）<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})</pre><div class="contentsignin">登入後複製</div></div>html 取參考
$route.query.id
script 取參this.$route.query.id

（params傳參） 只可以使用name

this.$router.push({name:'home',params: {id:'1'}})

html 取參

$route.params.id， script 取參考this.$route.params.id

3.query和params的差異#query類似get

,跳轉之後頁面

url後面會拼接參數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在params

類似###post###, 跳轉之後頁面###url###後面不會拼接參數, 但是刷新頁面###id# ## 會消失###

以上是一文詳解vue路由跳轉-參數傳遞與接收的詳細內容。更多資訊請關注PHP中文網其他相關文章！