Vue中的命名路由

命名路由

我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径了

<router-link
    v-for="nav in navs"
    :key="nav.id"  
    :to="{name:nav.name}"  
>
{{nav.title}}</router-link>



//router/index.js的配置
var router = new VueRouter({
	routes:[
		{
			path:"XXXX",
			component:XXXX,
			children:[
				{path:"guonei",component:()=>import("@/views/Guonei"),name:"guonei"},   
				{path:"guoji",component:()=>import("@/views/Guoji"),name:"guoji"}
			]
		}
	]
})


<script>
	export default {
		data(){
			return {
				navs:[
					{id:1,title:"国内新闻",name:'guonei'},				
					{id:2,title:"国际新闻",name:'guoji'}				
				]			
			}
		}
	}
</script>