vue-router參數(shù)傳遞

第一種：get方法

傳值：

<router-link :to="{path:'/get',query:{userId:123,username:'xia'}}">get跳轉(zhuǎn)</router-link> //或 <router-link :to="{name:'get',query:{userId:123,username:'xia'}}">get跳轉(zhuǎn)</router-link>

接收值：

//在get.vue文件中 <template><div><p>get跳轉(zhuǎn)頁</p><p>userId:{{userId}}</p><p>username:{{username}}</p></div> </template> <script>export default {data(){return{//接收值：userId:this.$route.query.userId,username:this.$route.query.username,}}} </script>

結(jié)果：url上顯示參數(shù)，頁面刷新后參數(shù)不會(huì)消失；

?

第二種：post方法

傳值：

<router-link :to="{name:'post',params:{stuId:456,stuName:'shang'}}">post跳轉(zhuǎn)</router-link> //路由path帶著路由參數(shù)params時(shí),params不生效，錯(cuò)誤示范： <router-link :to="{path:'/post',params:{stuId:456,stuName:'shang'}}">post跳轉(zhuǎn)</router-link>

接收值：

<template><div><p>post頁面</p><p>studentId:{{stuId}}</p><p>studentName:{{stuName}}</p></div> </template> <script>export default {data(){return{//接收值：stuId:this.$route.params.stuId,stuName:this.$route.params.stuName,}}} </script>

結(jié)果：url上不顯示參數(shù)，頁面刷新后參數(shù)會(huì)消失；

?

第三種：路由方法

傳值：

<router-link to="/route/789/zuo">路由跳轉(zhuǎn)</router-link>

接收值：

<template><div><p>路由傳值</p><p>rouId:{{rouId}}</p><p>rouName:{{rouName}}</p></div> </template> <script>export default {data(){return{rouId:this.$route.params.rouId,rouName:this.$route.params.rouName,}}} </script>

結(jié)果：url上顯示參數(shù)，頁面刷新后參數(shù)不會(huì)消失；

注意：

（1）

上文中router-link中的path和name都是路由里面的，頁面創(chuàng)建成功后一定要配置頁面的路由；

上文中第三種方法，還在路由中也進(jìn)行了相應(yīng)的配置；

路由中的配置：

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/get',name:'get',component: resolve => require(['../components/get.vue'], resolve),meta: {title: 'get'},},{path: '/post',name:'post',component: resolve => require(['../components/post.vue'], resolve),meta: {title: 'post'},},{path: '/route/:rouId/:rouName?'name:'route',component: resolve => require(['../components/route.vue'], resolve),meta: {title: 'route'},}] })

（2）

?當(dāng)在鏈接上設(shè)置replace屬性，點(diǎn)擊時(shí)，會(huì)調(diào)用router.replace()而不是router.push()，于是瀏覽器不會(huì)留下history記錄，也就是無法返回上一頁，但會(huì)進(jìn)入上上頁；

?（3）

在組件中獲取參數(shù)：

<template><div><p>{{$route.params.userId}}</p><p>{{$route.params.userName}}</p></div> </template>

簡單說明router和route的區(qū)別：

$router ：是指整個(gè)路由實(shí)例,你可以操控整個(gè)路由，用法如下：

• this.$router.go(-1); // 向前或者向后跳轉(zhuǎn)n個(gè)頁面，n可為正整數(shù)或負(fù)整數(shù)
• this.$router.push('/'); // 跳轉(zhuǎn)到指定url路徑，history棧中會(huì)有記錄，點(diǎn)擊返回會(huì)跳轉(zhuǎn)到上個(gè)頁面
• this.$router.replace('/'); // 跳轉(zhuǎn)到指定url路徑，但是history棧中不會(huì)有記錄，點(diǎn)擊返回會(huì)跳轉(zhuǎn)到上上個(gè)頁面

$route：是指當(dāng)前路由實(shí)例$router跳轉(zhuǎn)到的路由對象；路由實(shí)例可以包含多個(gè)路由對象，它們是**父子包含關(guān)系**.

• this.$route.params.userId// 獲取路由傳遞過來的參數(shù)
• this.$route.query.userName// 獲取路由傳遞過來的參數(shù)

?

總結(jié)

以上是生活随笔為你收集整理的vue-router参数传递的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。