vue 路由组件

路由组件与局部组件千万不要弄混淆，

• 路由组件 引入相关联vue文件的时候 在router文件内引入
• router-link 相当于a链接 点击的时候将视图内容呈现在view路径上
• router-view 是呈现相对应的组件内容

此代码中将parent.vue 为跟组件 也是跟路由 children2.vue 与children3.vue 为嵌套路由 代码如下

parent.vue 组件内容<template lang="pug">.wrap  router-link(to="/children2")  我children22  br  router-link(to="/children3") 我children22  router-view</template><script>import children from './children'export default {  name: 'HelloWor',  data () {    return {      msg: '这个是父组件的-prop-数据'    }  },  components: {    children  }}</script><style scoped>.wrap {}</style>

---

children2.vue 组件的内容<template lang="pug">.wrapper  .div 我是嵌套路由2222</template><script>export default {}</script><style scoped></style>

---

在touter文件上的嵌套路由配置- 在js文件中引入需要的路由文件

import Vue from 'vue'import Router from 'vue-router'import parent from '@/components/parent'import children2 from '@/components/children2'import children3 from '@/components/children3'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      component: parent,      // 嵌套组件children2，children3 放在数组里      children: [        {          path: '/children2',          component: children2        },        {          path: '/children3',          component: children3        }      ]    }  ]})