vue router-view 多个视图嵌套 和 命名router-view
多个router-view视图嵌套:1,除了app.vue中的router-view之外,还有其他的嵌套在router-view中的router-view视图,子路由写在router.js children中app.vue<template><div id="app"><router-view>
·
多个router-view视图嵌套:
1,除了app.vue中的router-view之外,还有其他的嵌套在router-view中的router-view视图,子路由写在router.js children中
app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
Main.vue
<template>
<router-view/>
</template>
路由router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
children:[{
path:'article',
// 单个router-view用:component
component: About
}
}]
}
]
})
命名router-view 注意components不是component
main.vue
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
router.js (默认的router-view是default,自己命名的就写自己定义的名称)
{
path: '/settings',
// 你也可以在顶级路由就配置命名视图
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
更多推荐
已为社区贡献23条内容
所有评论(0)