vue中router实现路由跳转和parmas传参

最新推荐文章于 2024-10-15 20:48:47 发布

小灰灰学编程

最新推荐文章于 2024-10-15 20:48:47 发布

阅读量1.1k

点赞数 1

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/chen_ac/article/details/121354970

版权

Vuejs 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文详细介绍了在Vue.js中通过`router-link`和`this.$router.push()`两种方式实现组件间参数传递的方法。通过修改`router.js`配置，创建了`student`和`teacher`两个组件，并在`APP.vue`中展示了如何在模板中使用这两种方式传递参数。在`created`生命周期钩子中，展示了如何访问传递的参数。

摘要由CSDN通过智能技术生成

文件结构：

student.vue：

<template>
    <div>
        <h1>学生</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: '我是学生组件'
            }
        },
		created() {
			console.log(this.$route.params)
		},
    }
</script>
<style scoped>
	
</style>

teacher.vue：

<template>
    <div>
        <h1>老师</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: '我是老师组件'
            }
        },
		created() {
			console.log(this.$route.params)
		},
    }
</script>
<style scoped>
	
</style>

router.js:

import Vue from "vue";
import VueRouter from "vue-router";
 
// 引入组件
import student from '../components/student.vue'
import teacher from '../components/teacher.vue'
 
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
 
const routes = [
    {
	  name:'student',
      path:"/student/:id",
      component: student
    },
    {
	  name:'teacher',
      path: "/teacher/:id",
      component: teacher
    },
]
 
var router =  new VueRouter({
    routes
})
export default router;

main.js:

APP.vue

方法一，通过router-link的方式：

<template>
  <div id="app">
		<div>
			首页<br />
		    <!-- 路由传参方法一 -->
		    <router-link :to="'/student/'+id">学生</router-link>
		    <router-link :to="'/teacher/'+id">老师</router-link>	
		</div>
		<div>
			<router-view></router-view>
		</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
	return {
		id: 0
	}
  },
}
</script>

<style scoped>

</style>

方法二通过点击事件和this.$router.push()：

<template>
  <div id="app">
		<div>
			首页<br />
			<!-- 路由传参方法二 -->
			<div @click="btnClick(1)">学生</div>
			<div @click="btnClick(2)">老师</div>
		</div>
		<div>
			<router-view></router-view>
		</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
	btnClick(index){
		if(index ==  1){
			this.$router.push({
				name:'student',
				params:{
					id:'111'
				}
			})
		}
		else{
			this.$router.push({
				name:'teacher',
				params:{
				    id:'222'
				}
			})
		}
	}
  },
}
</script>

<style scoped>

</style>