Vue-路由跳轉的幾種方式和路由重定向

一、標簽路由 router-link 

注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。

1、不傳參

　   <router-link :to="{name:'Home'}"> 
　   <router-link :to="{path:'/home'}">

2、傳參

　　<router-link :to="{name:'Home', params: {id:1}}">
　　<router-link :to="{path:'/home', params: {id:1}}"> 
　　// params傳參數
　　// 路由配置 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傳參數 (類似get,頁面url后面會顯示參數)
　　// 路由可不配置
　　// html 取參 $route.query.id
　　// script 取參 this.$route.query.id

 

二、編程式路由 this.$router.push()

1、不傳參
　　this.$router.push('/home')
　　this.$router.push({name:'Home'})
　　this.$router.push({path:'/home'})

2、傳參
　　this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
　　// params傳參數
　　// 路由配置 path: "/home/:id"
　　// 不配置path ,第一次可請求,刷新頁面id會消失
　　// 配置path,刷新頁面id會保留
　　// html 取參 $route.params.id
　　// script 取參 this.$route.params.id

　　this.$router.push({name:'Home',query: {id:'1'}})
　　this.$router.push({path:'/home',query: {id:'1'}})
　　// query傳參數 (類似get,頁面url后面會顯示參數)
　　// 路由可不配置
　　// html 取參 $route.query.id
　　// script 取參 this.$route.query.id