Vue 命名路由
Vue 命名路由
routes设置name属性
router-link的to属性设置对应的name
routes配置
import VueRouter from 'vue-router'
import Island from '../pages/Island'
import IslandMessage from '../pages/IslandMessage'
import IslandPhone from '../pages/IslandPhone'
import NameComp from '../pages/NameComp'
export default new VueRouter({
routes: [
{
component: Island,
path: "/Island",
children: [
{
path: 'IslandMessage',
component: IslandMessage
},
{
path: 'IslandPhone',
component: IslandPhone,
children:[
{
name:'NameComp',
path:'NameComp',
component:NameComp
}
]
},
]
}
]
})
路由组件配置
IslandPhone.vue
<template>
<div>
<router-link :to="{name:'NameComp'}" >命名路由</router-link>
<router-view />
</div>
</template>
<script>
export default {};
</script>