vue嵌套路由

一、为什么要使用嵌套路由？

就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个 < router-view >， 当我点击不同的按钮时，他们的router-link分别所指向的组件就会被渲染到这个< router-view >中。

二、步骤演示：

1. 在views目录下新建user目录，编写User.vue和Profile.vue
2. 配置路由信息 router/index.js
3. 编写Main.vue
4. 编写main.js，导入路由信息

1.在views目录下新建user目录，编写User.vue和Profile.vue

Profile.vue

<template>
    <h1>这是用户信息页面</h1>
</template>

<script>
  // 导出的名字可以与组件名字不一样，引用的时候，引用导出的名字即可
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

User.vue

<template>
  <div>
      <h1>这是用户页面</h1>
      <p>路由嵌套，你会了吗?</p>
  </div>
</template>

<script>
  // 导出的名字可以与组件名字不一样，引用的时候，引用导出的名字即可
  export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

2.配置路由信息 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入对应的插件
import Main from '../views/Main'
import Login from '../views/Login'

// 导入定义的组件
import UserList from '../views/user/User'
import UserProfile from '../views/user/Profile'

// 安装路由，显示声明使用VueRouter才生效
Vue.use(VueRouter);

// 导出路由
export default new VueRouter({
  // 配置路由信息
  routes: [
    {
      // 路由路径
      path: '/main',
      // 跳转的组件
      component: Main,
      // 子路由,即嵌套路由
      children:[
        {

          path: '/user/profile',
          component: UserProfile
        },
        {
          path: '/user/list',
          component: UserList
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]

});

3.编写Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">分类管理</el-menu-item>
              <el-menu-item index="1-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
            <el-menu-item index="2-1">
              <router-link to="/user/profile" class="router-link-active">用户信息</router-link>
            </el-menu-item>

            <el-menu-item index="2-2">
              <router-link to="/user/list" class="router-link-active">用户列表</router-link>
              </el-menu-item>
          </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <!--组件的渲染-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

  <style scoped lang="scss">
  .e1-header{
    background-color:#2acaff;
    color: #333;
    line-height:60px;
  }
  .el-aside{
    color: #333;
  }
  .router-link-active {
    text-decoration: none;
    color: #000;
  }
  </style>

4.编写main.js，导入路由信息

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//自动扫描里面的路由配置，如/router/index.js,  ./当前文件
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(router);
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 配置路由
  router,
  render: h => h(App) // ElementUI
});

效果：
url: http://localhost:8080/#/main

三、碰到的问题

…/…/node_modules/axios in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/ views/Login.vue

四、解决方案

方案一

1. Module build failed: TypeError: this.getOptions is not a function
2. 原因： 出现问题的原因是安装的sass-loader版本过高,选择安装较低版本的sass-loader即可。
3. 解决方案：选择下面其中一个执行就可！

1.手动修改sass-loader版本：

2.输入下面命令

npm install sass-loader@7.3.1 --save-dev

方案二

1.Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
2.原因：出现问题的原因是安装的sass版本过高,选择安装4.0+版本的sass即可。
3.解决方案：选择下面其中一个执行就可！

1.手动修改sass-loader版本：

2.输入下面命令

npm install node-sass@4.14.1 --save-dev