vue-router路由传参

一、配置路径

export default new Router({
	routes: [
		{
		path: '/main',
		name: 'Main',  // 一定要写name,params必须用name来识别路径
		component:() => import ('@/views/Main.vue'),
			children: [
				{
					path: '/home',
					name: 'home',
					component: () => import ('@/views/Home.vue'),
				},
				{
					path: '/myself',
					name: 'myself',
					component: () => import ('@/views/Myself.vue'),
				},
			]
		},
		{
			path: '/login',
			name: 'Login',
			component: () => import ('@/views/Login.vue'),
		}
	]
})

二、传递参数：用 $router

this.$router相当于一个全局的路有对象，包含了很多属性和对象（比如history对象），任何页面都可以调用其push()、replace()、go()等方法

$router:是路由操作对象，只写对象

<template>
  <div>
    <button @click="routerTo()">query传参</button >
  </div>
</template>
<script>
	export default {
	  methods: {
	    routerTo() {
 	     this.$router.push({
	        name: `Main`,
	        params: {
	          username: 'admin', 
	          code: '200'
	        }
	      })
	    }
	  }
	}
</script>

三、接受参数：用 $route

this.$route表示当前路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query等属性。

$route:是路由信息对象，只读对象

<template>
  <div></div>
</template>
<script>
	export default{
	  data() {
	    return {
	      username: '',
	      code: ''
	    }
	  },
	  created() {
	    this.getRouterData()
	  },
	  methods: {
	    getRouterData() {
	      this.page = this.$route.params.username
	      this.code = this.$route.params.code
	      console.log('username', this.username)
	      console.log('code', this.code)
	    }
	  }
	}
</script>

query可以使用name引入，也可以path来引入传参，params传参主要用name来引入