使用路由对象$route获取参数：
1、params：
参数获取：使用$route.params获取参数；
参数传递： URL传参：例 <route-linke to : "/foods/bjc/北京烤鸭/68"> 注：在对应路由path上使用 /:+属性名称接收参数
实例：
需要在子组件的路由中定义所需的属性名;
代码：
<template id="foods"> <div> <h2>美食广场</h2> <ul> <router-link to="/foods/bjc/北京烤鸭/68" tag="li"> 北京菜</router-link> <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link> <router-link to="/foods/xc" tag="li"> 湘菜</router-link> <router-link to="/foods/yc" tag="li"> 粤菜</router-link> <router-link to="/foods/scc" tag="li"> 四川菜</router-link> </ul> <router-view></router-view> </div> </template>
//定义foods中的子组件 let Bjc={ template : "<h3>北京菜 菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" }
//2 配置路由 路由可能有多个 const myRoutes = [ { path : "/home", component : Home }, { path : "/foods", component : Foods, children:[ { path:"bjc/:name/:price",//定义其属性 component:Bjc },
对象传参：例 <route-linke :to : "xxObj"> 注：对象格式{String name, Objce param} name是路由名称，param是传递参数的对象
对象需要通过v-bind进行绑定
<router-link :to="sccParam" tag="li"> 四川菜</router-link>
使用对象：
let Foods = { template : "#foods", data(){ return{ sccParam:{ name:'sccRouter', params:{ name:"麻婆豆腐", price:28 } } } } }
let Scc={ template : "<h3>四川菜 菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" }
效果：
注意：对象的名称必须和路由的名称保持一致，在路由中起的名称可以称作为命名路由
2、query：
参数获取：使用$route.query获取参数；
参数传递： URL传参：例 <route-linke to : "/foods/bjc?name=北京烤鸭&price=68">
代码：
<router-link to="/foods/xc?name=剁椒鱼头&price=128" tag="li"> 湘菜</router-link>
let Xc={ template : "<h3 >湘菜 菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" }
对象传参：例 <route-linke :to : "xxObj"> 注：对象格式{String path, Objce query} path是路由url，query是传递参数的对象
<router-link :to="ycParam" tag="li"> 粤菜</router-link>
let Foods = { template : "#foods", data(){ return{ sccParam:{ name:'sccRouter', params:{ name:"麻婆豆腐", price:28 } }, ycParam:{ path:'/foods/yc', query:{ name:"蜜汁叉烧", price:56 } } } } }
let Yc={ template : "<h3>粤菜 菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" }
以上实例的所有代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用路由对象获取参数</title> 6 </head> 7 <body> 8 <div id="one"> 9 <router-link to="/home">首页</router-link> 10 <router-link to="/foods">美食</router-link> 11 12 <div> 13 <!--将数据显示在这里--> 14 <router-view></router-view> 15 </div> 16 </div> 17 </body> 18 <template id="foods"> 19 20 21 <div> 22 23 <h2>美食广场</h2> 24 <ul> 25 <router-link to="/foods/bjc/北京烤鸭/68" tag="li"> 北京菜</router-link> 26 <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link> 27 <router-link to="/foods/xc?name=剁椒鱼头&price=128" tag="li"> 湘菜</router-link> 28 <router-link :to="ycParam" tag="li"> 粤菜</router-link> 29 <router-link :to="sccParam" tag="li"> 四川菜</router-link> 30 </ul> 31 32 <router-view></router-view> 33 </div> 34 </template> 35 36 <script type="text/javascript" src="../js/vue.js" ></script> 37 <script type="text/javascript" src="../js/vue-router.js" ></script> 38 <script> 39 40 //1 定义组件 41 let Home = { 42 template : "<h2>首页</h2>" 43 } 44 let Foods = { 45 template : "#foods", 46 data(){ 47 48 return{ 49 sccParam:{ 50 51 name:'sccRouter', 52 53 params:{ 54 55 name:"麻婆豆腐", 56 price:28 57 } 58 }, 59 60 ycParam:{ 61 path:'/foods/yc', 62 query:{ 63 name:"蜜汁叉烧", 64 price:56 65 66 } 67 68 } 69 } 70 } 71 } 72 73 //定义foods中的子组件 74 75 let Bjc={ 76 template : "<h3>北京菜 菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" 77 78 } 79 80 let Hnc={ 81 template : "<h3>湖南菜 </h3>" 82 83 } 84 let Xc={ 85 template : "<h3 >湘菜 菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" 86 87 } 88 89 let Yc={ 90 template : "<h3>粤菜 菜名：{{$route.query.name}} 价格：{{$route.query.price}}</h3>" 91 92 } 93 94 let Scc={ 95 template : "<h3>四川菜 菜名：{{$route.params.name}} 价格：{{$route.params.price}}</h3>" 96 97 98 99 } 100 101 //2 配置路由 路由可能有多个 102 const myRoutes = [ 103 { 104 path : "/home", 105 component : Home 106 }, 107 { 108 path : "/foods", 109 component : Foods, 110 111 children:[ 112 { 113 path:"bjc/:name/:price",//定义其属性 114 component:Bjc 115 116 117 }, 118 { 119 path:"hnc", 120 component:Hnc 121 122 123 }, 124 125 { 126 path:"xc", 127 component:Xc 128 129 130 }, 131 { 132 path:"yc", 133 component:Yc 134 135 136 }, 137 { 138 name:'sccRouter', 139 path:"scc", 140 component:Scc 141 142 143 } 144 145 146 147 148 149 ] 150 }, 151 { 152 path:"*", 153 redirect:"/home" 154 } 155 ] 156 157 // 3 创建路由对象 158 const myRouter = new VueRouter({ 159 //routes : routes 160 routes : myRoutes, 161 //mode:'history' 162 linkActiveClass : "active" 163 164 }); 165 166 new Vue({ 167 //router : router 168 router : myRouter //4 注入路由 简写 169 }).$mount("#one"); 170 </script> 171 <style> 172 173 174 .active{ 175 color: white; 176 177 background-color: black; 178 } 179 </style> 180 </html>
最后从上面的效果图中我们可以看到四川菜刷新后价格与菜名都消失了，所以使用params的对象传参的时候刷新的时候数据是获取不了的。