vue-router跳转新页面获取不到params参数

Question

我想通过 vue-router 跳转一个新的页面，并传递参数到新页面中，但是怎么也获取不到 params 里的数据，下面是具体代码。

发起跳转页面js代码：

var router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/article/detail/', name: '/detail'}
    ]
})

Vue.component('article-card',{
    template: '#article-card',
    methods: {
        _to: function(){
            var detail = this.$router.resolve({name: "/detail", params: {article_id: 78}})
            window.open(detail.href, '_blank')
        }
    },
})

var article_list = new Vue({
    el: '#article_list',
    router: router
})

/article/detail/ 会请求后端，返回一个新的页面，在新页面中获取 params 。
_to 就是发起请求的方法，在页面的组件中调用。

目标页面js代码：

var router = new VueRouter({
    mode: "history"
})

var header = new Vue({
    el: '#header',
    created: function(){
        console.log('id::'+this.$route.params.article_id)
    },
    router: router,
})    

可以跳转到目标页面，控制台也没有报错，但是打印结果为 undefined 。

使用 query 传参可以正常获得参数。

检查了很长时间没发现哪里出错，拜托大家帮忙看一下。

上面的代码都是直接在 js 文件里写的，没有用模块化。

Answer 1

params 是保存在内存中的，window.open(detail.href, '_blank') 会打开一个新的窗口，这时候已经跟之前的 vue-router 实例没关系了，你这个问题可以用 this.$router.resolve({name: "/detail", query: {article_id: 78}})，在新的页面去拿 this.$route.query 就可以了

Answer 2

params刷新页面数据会丢失。
解决方法：①query传参 ②vuex存取

Answer 3

params传参时在路由定义里设置url参数

var router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/article/detail/:article_id', name: '/detail'}
    ]
})

Answer 4

open新页面，window对象是独立。拿不到数据，你可以使用query的形式，或者params放入url里面的形式

var router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/article/detail/:article_id', name: '/detail'}
    ]
})

this.$router.resolve({path: `/article/detail/${article_id}`});