第4章 **插件-路由-难-脚手架下开发(2)

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

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

路由配置

    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
  }
  ]
}