element ui框架（路由參數傳遞）

【 聲明：版權所有，歡迎轉載，請勿用於商業用途。 聯繫信箱：feixiaoxing @163.com】

前端開發中，有的時候路由也是需要帶參數傳遞的。不管是窗口登錄，還是超鏈接，一般會帶1個或者多個參數。如果是多個參數，通常就用分隔符把它們連接在一起。vue工程下面的參數傳遞一般是這麼解決的，

1、非props傳遞，

1.1 首先需要在router/index.js中添加傳遞參數

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
	{
      path: '/Login',
      name: 'Login',
      component: Login
    },
	{
      path: '/Main',
      name: 'Main',
      component: Main,
	  children :[
		  {
			  path: '/Member/Level/:id', //id為需要傳遞的參數
			  name:'MemberLevel',
			  component: MemberLevel,
		  },
		  {
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  }
	  ]
    }
  ]
})

如上面一段中文説明，這個時候只需要把參數用冒號割開即可。

1.2 在Main.vue中添加超鏈接，

如果是比較簡單的辦法，直接拼接url即可，比如像這樣，

<router-link to="/Member/Level/1">會員等級</router-link>

另外一種方法就是把to看成是一個json對象，這也是可以的，

<router-link :to="{name:'MemberLevel', params:{'id':1}}">會員等級</router-link>

1.3 有了上面的鋪墊，那麼MemberLevel.vue中使用id就很簡單了

<div>會員等級==={
<!-- -->{this.$route.params.id	}}</div>

2、props傳遞

2.1 props傳遞，關鍵之處在於在router/index.js添加一個props屬性

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
	{
      path: '/Login',
      name: 'Login',
      component: Login
    },
	{
      path: '/Main',
      name: 'Main',
      component: Main,
	  children :[
		  {
			  path: '/Member/Level/:id', //id為需要傳遞的參數
			  name:'MemberLevel',
			  component: MemberLevel,
			  props:true   // 添加props屬性
		  },
		  {
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  }
	  ]
    }
  ]
})

和1.1相比較，這裏多了props屬性，並且設置為true。

2.2 Main.vue中添加超鏈接

這部分和1.2是一樣的，不再贅述。

2.3 修改MemberLevel.vue

<template>
	<div>會員等級==={
<!-- -->{id}}</div>
</template>

<script>
export default {
	props:["id"],
	name:"MemberLevel"
}

</script>

<style>
</style>

和router中的index.js一樣，在MemberLevel.vue也得添加一個props屬性，這樣div中就可以直接引用id這個變量了。

3、Login.vue和Main.vue之間的傳遞

一般Login之後，都需要把相關傳遞信息傳給Main網頁。這個時候就可以用上面1或者2的方法來完成參數傳遞。不失一般性，可以用非props方法來傳遞，

3.1 重新配置router/index.js路由

{
      path: '/Main/:name', //name為需要傳遞的參數
      name: 'Main',
      component: Main,
	  children :[
		  {
			  path: '/Member/Level/:id', //id為需要傳遞的參數
			  name:'MemberLevel',
			  component: MemberLevel,
			  props:true   // 添加props屬性
		  },
		  {
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  }
	  ]
    }

3.2 修改submitForm函數

submitForm(formName) {
			//alert('submit!');
			
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$router.push({name:"Main",params:{"name":this.form.name}});
				} else {
					this.$message.error('請輸入正確用户名或密碼!');
					return false;
				}
			});
		}

3.3 在Main.vue中引用傳遞的參數

<span>{
<!-- -->{this.$route.params.name}}</span>

4、總結

網頁之間傳參，是數據傳遞的重要方式，這部分建議好好掌握。當然，傳參只是基礎，後續還要對參數進行本地化保存，這也是非常重要的。