vue2.0入门及实战开发(六)

需求：通过a标签点击，做页面数据的跳转

注意：在for循环中若要绑定index，就要注意了，否则很容易报错
<li v-for="(hero,index) in heros" :key="index">



export default{
    data(){
        return{

        }
    },//DOM还未生成
    created(){
        //获取路由参数
        //vue-router中挂载两个对象的属性
        //$route 信息数据  $router 功能函数
        console.log(this.$route.query);   通过query来获取

        console.log(this.$route.params);
    },//已经将数据挂载到页面上去了，DOM已经生成
    mounted(){

    }
}   

<li v-for="(hero,index) in heros" :key="index">
    {{hero.name}}
    <!--1：去哪里  ?id=12-->
    <router-link :to="{name: 'detail',query:{id:index}}">查看</router-link>
    <!--若是 /detail/12-->
    <router-link :to="{name: 'detail',params:{id:index}}">查看</router-link>
</li>

注意：在routes的要声明下
routes:[
{name:'list',path:'/list',component:List},
{name:'detail',path:'/detail/:id',component:Detail}
]

总结：
在vue-router中，有两大对象被挂载到了实例this
$route(只读、具备信息的对象) $router(具备功能函数)

this.$router.go()
this.$router.push()

一：查询字符串
  1：去哪里<router-link :to="{name: 'detail',query:{id:1}}">xxx</router-link>
  2：导航：查询字符串path不用改  {name:'detail',path:'/detail',组件}
  3：去了干嘛，获取路由参数(要注意是query还是params和对应的id名)
  this.$route.query.id

二：path方式
  1：去哪里<router-link :to="{name: 'detail',params:{name:1}}">xxx</router-link>
  2：导航：(path方式需要在路由规则上加上 /:xxx )   {name:'detail',path:'/detail/:name',组件}
  3：去了干嘛，获取路由参数(要注意是query还是params和对应的id名)
  this.$route.params.name



命名路由：

<router-link :to="{name:'music'}">

<router-link :to="/music">也可以直接跟路径使用

param  query:{id:index}

注意：
<router-link :to='{name:music}'></router-link>    这个在list.vue中
流程：通过这标签确定去哪里，通过name找到path，从而生成自己的href


let router=new VueRouter({    这个是在main.js中
   routes:[
{name:'music',path:'/mymusic',component:Music}    命名路由
{path:'/movie',component:Movie}
 ]
});



注意：
查询字符串中path不用改 
{name:'detail',query:{id:index}}
{name:'detail',path:'/detail',componnet:Detail}

path方式中param要修改下
{name:'detail',params:{id:index} }   =>/detail/12
{name:'detail',path: '/detail/:id',component:Detail}
在这里要告诉id往哪里放，故为 /detail/:id