需求:通过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 



Logo

前往低代码交流专区

更多推荐