Vue in this. $ Router.push (parameters) to achieve the page jump

In many cases, we click the button before performing the jump page will execute a series of methods, then you can use  this. $ Router.push (location)  to modify the url, complete the jump.

behind the push may be an object, or a string:

// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

Jump page and pass parameters of the method:

1.Params

Due to the dynamic routing is passed params, so the path can not be used together and params in this. $ Router.push () method, otherwise it will be invalid params. You need to use the name to the specified page.

The name attribute access and configuration through routing

Defined in the routing configuration file parameters:

/* router.js 文件*/
import Vue from "vue";
import Router from "vue-router";
import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; //资讯列表
 
Vue.use(Router);
export default new Router({
  routes: [ /* 进行路由配置 */
    {
        name: "MediaSecond",
        path: "/MediaSecond",
        component: MediaSecond
    },
  ]
})
 
/* 后面还需要接一空行，否则无法通过 ESlint 语法验证 */

Get the page by name, passing params:

this.$router.push({ name: 'MediaSecond',params:{artistName:artistName,imgUrl:imgUrl,type:2} })

In the target page through this $ route.params acquisition parameters:

if (this.$route.params.type == 2) {
    this.type = apis.getAtistDetails;
} else {
    this.type = apis.getMessageList;
}

2.Query

Page transmission parameters path / name and a query, in this example a row of table data row

this.$router.push({ name: 'DetailManagement', query: { auditID: row.id, type: '2' } });
this.$router.push({ path: '/DetailManagement', query: { auditID: row.id, type: '2' } });

. $ Route.query get through this parameter in the destination page:

this.$route.query.type