https://router.vuejs.org/zh/guide/#html
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
目标
- 简单路由
- 路由嵌套
用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
1、简单的路由
app.vue
主页
props
parentjson
refparent
router/index.js
import props from '@/components/props/parent'
import parentjson from '@/components/props/parentjson'
import refparent from '@/components/refs/parent'
{
path: '/props',
name: 'props',
component: props
},
{
path: '/parentjson',
name: 'parentjson',
component: parentjson
},
{
path: '/refparent',
name: 'refparent',
component: refparent
}
这样就可以在多个页面间自由切换了
2、路由嵌套
要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置:
例1
新增加三个vue
index.vue
top.vue
middle.vue
top
parent
parent01
parent02
路由配置
import index from '@/components/router/index'
{
path: '/index',
name: 'index',
component: index,
//children:[{},{}]
children:[{
path: '/parent',
name: 'parent',
component: parent
},
{
path: '/parent01',
name: 'parent01',
component: parent01
}
]
}
测试
浏览器输入地址,他会自动嵌入到子组件里
http://localhost:8080/#/index
关键代码
嵌套路由及子组件中的
{
path: '/index',
name: 'index',
component: index,
//children:[{},{}]
children:[{
path: '/parent',
name: 'parent',
component: parent
},
{
path: '/parent01',
name: 'parent01',
component: parent01
}
]
}