vue嵌套路由-params传递参数

2、不显示在url中，如果在PC端将传递的值显示在url中，这样无形中就存在安全隐患，如果客户不小心修改了url那样就会出错，移动端就无所谓了，如何才能不显示在url中，同样很简单，但是需要给映射的路径起一个别名，通过name来取别名

同样只需将上面的main.js中的定义路由改为如下样子，在子路由中通过name来给路径其一个game1的别名。

[html]  view plain  copy

1. //定义路由  
2. const routes = [  
3.     { path: "/", redirect: "/home" },//重定向  
4.     {  
5.         path: "/home", component: home,  
6.         children: [  
7.             { name: "game1", path: "/home/game/", component: game }  
8.         ]  
9.     }  
10. ]  

home.vue 中router-link修改为:to="{ name:'game1', params: {num: 123} }" params中是要传递的参数，这样传递的参数就不会显示在url中。

[html]  view plain  copy

1. <template>  
2.     <div>  
3.         <h3>首页</h3>  
4.         <router-link :to="{ name:'game1', params: {num: 123} }">  
5.             <button>显示</button>  
6.         </router-link>  
7.         <router-view></router-view>  
8.     </div>  
9. </template>  

运行的结果如下图