VUE——路由传参

接着上篇博客聊些路由传参。router定向，看下代码，下面的三种写法都能达到定向的目的。

<li><router-link to="/hi">hi</router-link></li>
<li><router-link :to= "hi">hi</router-link></li>
<li><router-link :to= "{path:hi}">hi</router-link></li>

传参，首先写定向。

 <li><router-link :to="{name:'hi',params:{id:'100'}}"  >hi</router-link></li>

name 要和index.js中的name对应。params是传递的参数。index.js中是如何写的那

{ 
  path: '/hi/:id',    //加id 参数传递
  name: 'hi',         //添加name
  component: Hi
},

上述的传参完成了，我们就在Hi页面中显示下吧！

  <div class="hi">
      HI组件：
      {{$route.params.id}}   //通过这代码就能接受传递过来的参数。
  </div>

分享结束。