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>