命名路由和视图

什么是命名路由？

命名路由就是在配置路由的时候给路由定义一个名称，好处是在路由跳转时可以使用具体的路由名称，同时还能支持 params 形式的路由传参 。

命令路由配置语法

# 某一条具体的路由项，添加 name 属性
{ 
	path : '/User', 
	name : "User",
	component : ()=> import("./pages/User.vue") ,
}

使用命名路由跳转语法

route-link :

<router-link :to="{name:'User'}">测试命名路由跳转</router-link>

编程式导航

router.push({
	name : "User",
});

命名视图

命名视图是只给多个不同的router-view定义不同的名字，可以通过名字进行对应组件的渲染。

实现命名视图

1. 添加命名视图组件

以 app.vue 组件为例

<template>
	<div>
		<router-link to="/">首页</router-link>
		  
		<router-link to="/About">跳转-path模式</router-link>
		  
		<router-link :to="{name:'About'}">跳转-命令路由</router-link>
		  
		<router-link :to="{name:'About'}">命名视图体验</router-link>
	</div>
	<div style="margin-top:15px;">
		<router-view></router-view>
	</div>
	<!-- 命名视图 -->
	<div style="margin-top:15px; background:gray;">
		<router-view name="routerView1"></router-view>
	</div>
</template>

2. 配置路由项

路由项支持命名视图语法

{ 
	path       : '/About', 
	name       : "About", 
	components : {
		default     : ()=> import("./pages/About.vue"),
		routerView1 : ()=> import("./pages/User.vue")
	},
},

上面的例子中 component 属性编写 components 属性，default 代表默认 route-view 展示的组件， routerView1 代表一个 name="routerView1" 的 route-view 展示的组件。