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

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：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打开，不再需要#号，