如何通过编程式导航传参

1动态路由传参

this.$router. push( ' /article/2 ' )

组件获取参数: this. $route.params .id

规则：

{
	path: '/article/ : id ' ,
    component: ArticleDetail
},

组件使用

goArticleDetail ( ) {
    //1.字符串形式
//this. $router. push('/ aiticle/2')
    //2、对象形式   注意path不能与params一起使用
    this.$router.push({path:'/article/5'})
}

2查询参数传参数

this. $router. push( ' / article?id=2 & name=zs' )

或写完整写法 this.$router.push(path:‘路径', query: {参数1:值,参数2:值,. . .}

路由规则path -> /路径 组件获取 this. $route.query.id

规则：

{
	path: '/article ' ,
    component: ArticleDetail
},

组件使用

goArticleDetail ( ) {
    //1、字符串形式
this. $router. push('/ article?id=2')
}

完整写法

goArticleDetail ( ) {
    //完整写法
	this. $router. push({
    //2、对象形式   path能与query一起使用
	//path:'/ article?id=2'
        path:'/article',
        //查询参数
        query:{
            id:1
        }
	})
}

参数多写成对象的形式