vue路由之命名路由

版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/81950619

一、通过:to="{name:'other'}"的命名。

1、添加 :to="{name:'other'}"

<router-link to="/home" tag="span">首页</router-link>
<router-link to='/about' tag="span">关于</router-link>
<router-link :to="{name:'other'}" tag="span">其他</router-link>

2、在路由规则里面name:'other',此时，点击其他按钮会跳转到对应的name为other的页面

//	路由规则定义
	var routes=[
		{path:'/home',component:Home,
			children:[
				{path:'/detail/:id',component:Detail}
			]
		},
		{path:'/about',components:{default:About,'other':Other}},
		{path:'/qita',name:'other',component:Other},
		{path:'*',redirect:'/home'}
	]

3、再点击后可以看到网络路径跳转到qita

-----------------------------------------------------------------------------------------------------------------------------------------------

二、如果一个页面要加载两个或多个组件的内容，可给路由视图加name

例如：把其他视图展示在关于页面

1、

<!--路由容器-->
		<router-view></router-view>	 
		
		<router-view name="other"></router-view>

 2、{path:'/about',components:{default:About,'other':Other}},

注意：component+s

解释：在about组件加载About和Other组件

//	路由规则定义
	var routes=[
		{path:'/home',component:Home,
			children:[
				{path:'/detail/:id',component:Detail}
			]
		},
		{path:'/about',components:{default:About,'other':Other}},
		{path:'/qita',name:'other',component:Other},
		{path:'*',redirect:'/home'}
	]

完整代码看上一篇