java 带参数跳转_关于vue路由跳转页面带参数方法总结

因为最近项目有这样一个需求：在首页导航栏显示消息数，点击每一条未读消息带着参数跳转到相应页面进行显示，网上查了好些办法，比如a组件跳转到b组件：

对于a组件有几种方式：

1.纯页面跳转

:to="{

path: '你要跳转的路由',

params: {

name: 'name', // params为传送的参数，name为router.js里为页面配置的name

data: data

},

query: {

name: 'name', //query和params也是传送的参数，区别在于query会在路径上显示参数

data: data

}

}">

2.通过js控制：

跳转

export default {

data() {

},

methods: {

lookDetail() {

this.$router.push({

path: '',

name: name, // 要跳转的路径的 name,可在 router 文件夹下的 index.js 文件内找

params: params

})

}

}

}

对于b组件的监听：这里是我遇到坑的地方，本来监听代码是这样:

watch: {

'$route': 'getParams'  // 监测路由变化,只要变化了就调用getParams

},

methods: {

getParams() {

const params = this.$route.params.dataobj  // 取到路由带过来的参数

}

但是发现第一次跳转时并没有监听到路由变化，而且多次切换路由参数是累加的(使显示不对)，所以查了好多方法，最后在b组件中使用beforeRouteEnter方法实现了a页面跳转带参显示在组件b中,需要注意的是此方法与watch,methods同级，且页面还未加载所以不能用this,具体用法可以百度下。

与这个方法相关的方法也可以百度了解下，非常实用：

beforeRouteUpdate (to, from, next) {

// 在当前路由改变，但是该组件被复用时调用

// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

// 可以访问组件实例 `this`

},

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用

// 可以访问组件实例 `this`

}

对于b组件：

watch(){

},

beforeRouteEnter(to, from, next) {

next(vm => { // 通过 `vm` 访问组件实例

console.log(vm.$route.params)

})

},

methods:{

//your code

}