1、to的对象写法,绑定参数
<template>
2 <ul>
3 <li v-for="m in messlist" :key="m.id">
4 <router-link :to="{ //使用params时，这个路径必须用name及别名......name: 'xiangqing', path: '/bbb/message/detail', query: { id: m.id }}"> {{ m.title }}</router-link>
5 </li>
6 </ul>
7</template>2、字符串路径写法
<template>
2 <ul>
3 <li v-for="m in messlist" :key="m.id">
4 <router-link :to="'/bbb/message/detail?id=' + m.id"> {{ m.title }}</router-link>
5 </li>
6 </ul>
7</template>3、接受页面接受参数
<template><div><!---------直接接受参数-------->id是：{{ $route.query.id }}id是：{{ $route.query.title }}===================================<br><!-----------监听参数--------->id是：{{ title }}id是：{{ id }}</div>
</template>
<script>
export default {name: 'Detail',data() {return {'id': '','title':''}},mounted() {console.log(this.$route)},watch: {'$route.query': {handler(newQuery) {// 根据需要更新组件的状态console.log(newQuery.id)this.id = newQuery.idthis.title = newQuery.title//也可以通过axios获取数据渲染},immediate: true, // 立即执行一次，确保在首次渲染时也能触发deep: true // 监听对象内部属性的变化}},
}
</script>
===========================params=====================================
<template><div><!---------直接接受参数-------->id是：{{ $route.query.id }}id是：{{ $route.query.title }}===================================<br><!-----------监听参数--------->id是：{{ title }}id是：{{ id }}===================================<!---------直接接受参数--------><br>params接受id是：{{ $route.params.id }}params接受id是：{{ $route.params.title }}===================================<br></div>
</template>
<script>
export default {name: 'Detail',data() {return {'id': '','title':''}},mounted() {console.log(this.$route)},watch: {// '$route.query': {// handler(newQuery) {// // 根据需要更新组件的状态// console.log(newQuery.id)// this.id = newQuery.id// this.title = newQuery.title// },// immediate: true, // 立即执行一次，确保在首次渲染时也能触发// deep: true // 监听对象内部属性的变化// }'$route.params': {handler(newQuery) {// 根据需要更新组件的状态console.log(newQuery.id)this.id = newQuery.idthis.title = newQuery.title},immediate: true, // 立即执行一次，确保在首次渲染时也能触发deep: true // 监听对象内部属性的变化}},
}
</script>
