element ui框架（重定向、404和路由模式）

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

前面我們陸續討論了關於網頁路由、子路由、路由傳參等問題，事實上路由還有一些需要注意的地方，這裏也一併討論下。

1、重定向

重定向是web後端開發經常遇到的問題，只不過現在從後端轉到了前端而已。我們可以舉例説明那個，如何試下重定向功能。首先，在router/index.js添加選項，

{
      path: '/Main/: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,
		  },
		  {
			  path: '/Redirect',
			  redirect: '/Member/List'
		  }
	  ]
    }

閲讀代碼發現，/Redirect和/Member/List指向了同一個鏈接。這樣就可以通過在Main.vue裏面添加一個超鏈接來驗證了，

<el-menu-item index="1-3">
							<router-link to="/Redirect">重定向</router-link>
						</el-menu-item>

2、404

404是經常遇到的另外一個問題。當然，要實現這個目標，第一步要做的就是先創建一個vue文件，也就是目標網頁訪問失敗後看到的那個網頁。比如，這個文件可以命名為NotFound.vue，內容如下所示，

<template>
	<div>404</div>
</template>

<script>
export default {
	name:"NotFound"
}

</script>

<style>
</style>

第二步，就是將這個vue文件和相關的url實現匹配關聯即可。要做到這個，只需要添加一條路由就可實現這個目標，

{
		path:'*',
		component:NotFound
	}

3、路由模式

所謂的開啟路由模式，就是在輸入網頁的時候，去除url中的#符號。比如我們想查看MemberList的時候，vue就會自動生成 http://127.0.0.1:8082/#/Member/List 。如果我們想去除#這個符號，只需要在路由表裏面添加一個mode屬性即可，

export default new Router({
  mode: 'history', //添加的模式
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
	{
      path: '/Login',
      name: 'Login',
      component: Login
    },
	{
      path: '/Main/: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,
		  },
		  {
			  path: '/Redirect',
			  redirect: '/Member/List'
		  }
	  ]
    },
	{
		path:'*',
		component:NotFound
	}
  ]
})

這樣，相關網頁就可以直接用ip打開，不再需要#號，