query和params區別
-
query類似 get, 跳轉之后頁面 url后面會拼接參數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在
-
1.0 不帶參數 形如：http://localhost:3000/#/home/newslist 2 3 // router.js 路由配置 4 { path: '/home/newslist', name：'newslist' component: Newslist } 5 6 <router-link to="/home/newslist"> 7 <router-link :to="{name:'newslist'}"> 8 <router-link :to="{path:'/home/newslist'}"> //name,path都行, 建議用name 9 10 // 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始 11 12 1.1帶參數 形如（例如從商品進入詳情）：http://localhost:3000/#/home/newsinfo/13 14 15 // router.js 路由配置 16 { path: '/home/newsinfo/:id', name: 'newsinfo', component: Newsinfo } //或者 17 { path: '/home/newsinfo:id', name: 'newsinfo', component: Newsinfo } 18 19 <router-link :to="'/home/newsinfo/' + item.id"> 20 <router-link :to="{name:'newsinfo', params: {id:item.id}}"> //router.js用上面的 21 22 // params傳參數 (類似post) 直接跟參數的形式 23 // 不配置path ,第一次可請求,刷新頁面id會消失 24 // 配置path,刷新頁面id會保留 25 26 // html 取參 $route.params.id 27 // script 取參 this.$route.params.id 28 29 1.2帶參數 形如（例如從商品進入詳情）：http://localhost:3000/#/home/newsinfo?id=13 30 31 // router.js 路由配置 32 { path: '/home/newsinfo', name: 'newsinfo', component: Newsinfo } 33 34 <router-link :to="'/home/newsinfo?id=' + item.id"> 35 <router-link :to="'/home/newsinfo?id=' + item.id"> 36 37 // query傳參數 (類似get,url后面會顯示參數) 38 // 路由可不配置 39 // html 取參 $route.query.id 40 // script 取參 this.$route.query.id
二： 編程式：this.$router.push() (點擊事件傳id，函數里面接收調用)
1. 不帶參數 形如：http://localhost:3000/#/home/newslist // router.js 路由配置 { path: '/home', name：'home' component: Home } this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'}) 2.1. params傳參 形如（例如從商品進入詳情）：http://localhost:3000/#/home/13 // router.js 路由配置 { path: '/home/:id', name: 'home', component: Home } //或者 { path: '/home:id', name: 'home', component: Home } this.$router.push('/home/' + id) this.$router.push({name:'home',params: {id:id}}) // 只能用 name // params傳參數 (類似post) 直接跟參數的形式 // 不配置path ,第一次可請求,刷新頁面id會消失 // 配置path,刷新頁面id會保留 // html 取參 $route.params.id // script 取參 this.$route.params.id 2.2. query傳參 形如（例如從商品進入詳情）：http://localhost:3000/#/home?id=13 // router.js 路由配置 { path: '/home', name: 'home', component: Home } this.$router.push('/home?id=' + id) this.$router.push({name:'home',query: {id:id}}) this.$router.push({path:'/home',query: {id:id}}) // query傳參數 (類似get,url后面會顯示參數) // html 取參 $route.query.id // script 取參 this.$route.query.id
this.$router.replace() (用法同上,push)
this.$router.go(n)