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>