vue 路由重定向、别名、html5 history模式、配置路由props传递参数

悠悠 2021-07-25 01:41 732阅读 0赞

重定向:
    	
    	将当前路径变成另一个路径的内容
    	可用来设置默认主页
    
    	1、在路由js文件中
    		routes的[]内添加
    			{path:'路径',redirect:'重定向路径/路由名称'}或
    			{path:'路径',redirect:'{name:"xx",params:{xx}}'}
    			
    			当重定向是函数时
    			{path:'路径',redirect:(所在页面的路由对象参数)=>{
    		
    				路由对象参数.query.键名获取当前页面参数；
    				return '重定向路径/路由名称'
    				或者
    				return {name:"xx",params:{xx}}
    			}}
    
    别名:
    	
    	访问设置了别名路径中的路由,实际上访问path中的路由
    
    	1、在路由js文件中
    		routes的[]内添加
    			{path:'路径/a',component:组件名,alias:'别名路径/b'}
    
    	其中:
    	/a的别名是/b,意味着,当用户访问/b时,URL会保持为/b,但是路由匹配则为/a,就像用户访问/a 一样。
    
    HTML5 history模式
    
    	1、在总路由js文件中,和routes同级
    		mode:'history',	
    		base:process.env.BASE_URL
    
    		其中:
    		(1)该设置会去掉url路径中的'#'号,这种模式充分利用history.pushState API来完成URL跳转而无须重新加载页面。
    		(2)本地服务器无问题,线上需要后台修改配置才能正确访问,要在服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源,则应该返回同一个index.html页面,这个页面就是你app依赖的页面。
    		(3)该模式路由切换路由都会向服务器发送请求,hash路由只会请求一次首页
    
    配置路由props传递参数
    	1、在路由中设置
    		(1)props:true;
    		(2)props:{键名1:true,键名2:false}; 当true时传递对应参数
    		(3)props:(route路由对象)=>( {接收键名:route.query.参数键名 })
    		
    	2、在路由对应组件中
    		props:['键名']；
    	3、调用
    		直接使用键名,和组件参数使用一样

代码示例:  
路由js文件:

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import HelloWorld from '../components/HelloWorld'
    import C from '../components/C'
    import D from '../components/D'
    import A from '../components/A'
    import B from '../components/B'
    import N from '../components/404'
    
    Vue.use(VueRouter)
    
    export default new VueRouter({ 
    	model:'history',
    	routes:[
    		{ path:'/',redirect:'/d'},
    		{ path:'*',component:N},
    		{ 
    			path:'/hello',
    			name:"HelloWorld",
    			component:HelloWorld
    
    		},
    		{ 
    			path:'/c',
    			name:'c',
    			component:C,
    			children:[
    				{ 
    					path:'cc',
    				
    					component:A,
    					children:[
    							{ 
    								path:'ccc',
    							
    								component:A
    							}
    						]
    				}
    			]
    		},
    		{ 
    			path:'/d',
    			name:'d',
    			component:D,
    			children:[{ 
    				path:"dd",
    				component:B
    			}]
    		}
    	]
    })