vue 跳转到指定路由地址 （可附带参数）

1. vue 使用 router-link 跳转到指定路由地址

使用 router-link

<span class="product-justify" @click="editPlan(originData[data.$index])">
    <router-link :to="{ path: '/calculatePlan'}" >调整</router-link>
</span>

使用router-link可以跳转到指定路由页面
:to 绑定路由地址，这个路由地址记得在 路由 中写好
路由文件中地址路径如下

{
            path: "/calculateMaterial", // 算料管理
            component: Layout,
            children: [
                {
                    path: "/ingredientRecord", // /原料化验/
                    component: ingredientRecord,
                    meta: { title: "配料记录" }
                },
                {
                    path: "/calculatePlan", // /成品化验/
                    name: "calculatePlan",
                    component: calculatePlan,
                    meta: { title: "算料方案" }
                }
            ]
        },

2. 附带参数跳转

可以使用params或者query

区别：
① 使用query跳转到的界面地址后会多出来参数 使用params不会多参数（还是原路由地址）
query

params

② 刷新后，query的参数不会消失（因为路由地址中含参数），params参数会消失

① query

点击跳转：

<router-link :to="{ path: '/calculatePlan/', name: 'calculatePlan', params: {feedAdviceId: id}}" >调整</router-link>

在path中写好跳转路由地址，name中写路由地址的name（见上文路由定义），然后再 params中添加一个对象（大括号），然后在对象中填写参数，这里的参数可以有多个，通过逗号分隔

参数接收
query通过 this.$route.params.参数名 来获取

if (this.$route.params.feedAdviceId !== null) {
        console.log('id', this.$route.query.feedAdviceId);
    }
}

此处在mounted中判断了一下有没有，有就可以用啦
注意$route 而不是 $router
这个参数接收，如果需要一开始就获取，那么可以写在页面的 mounted 或者 created 中；如果需要点击页面某个地方才开始获取参数，可以将上文的参数接收写在 @click的方法中

② params

点击跳转

<router-link :to="{ path: '/calculatePlan/', name: 'calculatePlan', params: {feedAdviceId: originData[data.$index].id}}" >调整</router-link>

参数接收

if (typeof (this.feedAdviceId) === 'number') {
    this.feedAdviceId = this.$route.params.feedAdviceId; // 获取feedAdviceId， 如果有则typeof 为 number，没有则为 undefined
}

ps1
如果该子组件页面既可以传参数又可以不传参数，那么再接收参数的时候，可以对相应参数判断一下，是否存在，比如上文中，使用typeof判断了一下id是否为数字，如果是number：说明参数存在并继续使用该id；是undefined：说明进入该子页面没有带参数
ps2
vue 可以通过 $route 获取页面的地址、参数、title