路由传参

传递参数

<router-link to='/news/1'>新闻1</router-link>

接受参数

• 通过$router对象上的params参数获取传递过来的id：$router.params:id

代码

-------------------------新闻页模板---------------------------
<template id="news">
        <div class="newsWrap">
                <h2>News</h2>
                <ul>
                    <!--
                        1.2代表传过去的参数
                        通过点击不同的router-link进行传递
                    -->
                    <li><router-link to='/news/1'>news001</router-link></li>
                    <li><router-link to='/news/2'>news002</router-link></li>
                </ul>
        </div>
</template>

----------------------新闻详情页模板---------------------------------------------------
<template id="nd">
        <div class="ndWrap">
                <p>新闻详情页</p>
                <span>参数：{{arr[$route.params.id]}}</span>  <!--$route.params.id接受参数-->
        </div>
</template>
----------------------------引入模块---------------------------------
var NewsDetails=Vue.extend({
        template:'#nd',
        data:function(){
            return{
                arr:['firstone','sdfkj22','dsfk3','sdkjf4','df5kj','6sdj']
            }
        }
});

-----------------在与news**同级**下定义详情页路由----------------------------------
  {path:'/news/:id',component:NewsDetails},  //:id为新闻详情页配置路径信息