【 聲明：版權(quán)所有，歡迎轉(zhuǎn)載，請勿用于商業(yè)用途。 聯(lián)系信箱：feixiaoxing @163.com】

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

1、非props傳遞，

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

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為需要傳遞的參數(shù)
			  name:'MemberLevel',
			  component: MemberLevel,
		  },
		  {
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  }
	  ]
    }
  ]
})

? ? ? ? 如上面一段中文說明，這個時候只需要把參數(shù)用冒號割開即可。

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傳遞，關(guān)鍵之處在于在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為需要傳遞的參數(shù)
			  name:'MemberLevel',
			  component: MemberLevel,
			  props:true   // 添加props屬性
		  },
		  {
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  }
	  ]
    }
  ]
})

? ? ? ? 和1.1相比較，這里多了props屬性，并且設(shè)置為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之后，都需要把相關(guān)傳遞信息傳給Main網(wǎng)頁。這個時候就可以用上面1或者2的方法來完成參數(shù)傳遞。不失一般性，可以用非props方法來傳遞，

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

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

3.2?修改submitForm函數(shù)

		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中引用傳遞的參數(shù)

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

4、總結(jié)

? ? ? ? 網(wǎng)頁之間傳參，是數(shù)據(jù)傳遞的重要方式，這部分建議好好掌握。當然，傳參只是基礎(chǔ)，后續(xù)還要對參數(shù)進行本地化保存，這也是非常重要的。文章來源地址http://www.zghlxwxcb.cn/news/detail-423607.html

到了這里，關(guān)于element ui框架（路由參數(shù)傳遞）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！