vue动态路由传参

(1)动态路由

动态路由规则定义：

{ path:'/关键词/:参数名' }

冒号后面是一个参数名，能够在进行路由规则匹配时，能够匹配到任意的字符或者数字。

第一步：创建一个详情页面

第二步：在路由配置文件中定义一个动态的路由规则

{
path:'/movieinfo/:mid',component:MovieInfo
}

第三步：在电影列表页面通过编程式导航进行页面跳转

methods:{
toInfo(id){
this.$router.push('/movieinfo/'+id)
}
}

第四步：在电影详情页面获取路由地址中的参数

<p>编号：{{ $route.params.mid }}</p>

(2)query查询参数

如果路由地址中的参数数量不固定时，使用动态路由就不合适了。

第一步：定义一个固定的路由规则

{
    // path:'/movieinfo/:mid',component:MovieInfo
    path:'/movieinfo',component:MovieInfo
}

第二步：在电影列表页面通过编程式导航进行页面跳转

methods:{
    // toInfo(id){//动态路由
    //     // this.$router.push('/movieinfo/'+id)
    // }
    toInfo(obj){//查询参数
        // this.$router.push('/movieinfo/'+id)
        this.$router.push({
            path:'/movieinfo',
            query:{
                movieid:obj.id,
                title:obj.title
            }
        })
    }
}

第三步：在电影详情页面获取路由地址中的参数

mounted(){
    console.log(this)
    // this.info = this.movies.find(item=>{
    //     return item.id == this.$route.params.mid
    // })
    this.info = this.movies.find(item=>{
        return item.id == this.$route.query.movieid
    })
}