Vue-Router(一) 嵌套路由

利用vue开发单页面应用有多么快捷这里就不多说了，应用界面通常由多层嵌套的组件组合而成，本文就说一下 Vue-Router 中的嵌套路由。
首先利用 vue-cli 构建一个 vue 项目（这里默认大家都已经安装了 nodeJs）

初始化vue项目

vue init webpack test
进入到目录

cd test
安装依赖

npm install
运行

npm run dev

关于vue-cli构建项目在此就不多说，主要说一下 Vue-Router。
在我们的项目目录 src 下就是我们的源码，components存放我们的组件，router里面的index.js就是我们的路由配置,打开它

    // 引入依赖
    import Vue from 'vue'
    import Router from 'vue-router'
    // 导入组件
    import Hello from '@/components/Hello'
    // 告诉 vue 你要使用 route
    Vue.use(Router)
    // 定义路由配置项并导出
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: Hello
        }
      ]
    })

现在我们先在 components 目录下新建两个 vue 文件，取名为 router1 和 router2，两个 vue 文件内部随便写点什么东西，用于区分，然后将index.js里面的内容修改如下：

    // 引入依赖
    import Vue from 'vue'
    import Router from 'vue-router'
    // 导入组件
    import Hello from '@/components/Hello'
    // 导入需要用到的子组件
    import RouterA from '@/components/router1'
    import RouterB from '@/components/router2'
    // 告诉 vue 你要使用 route
    Vue.use(Router)
    // 定义路由配置项并导出
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: Hello,
          // 在这里配置你的子路由
          children: [
            {
              path: 'routerA',
              name: 'routerA',
              component: RouterA
            },
            {
              path: 'routerB',
              name: 'routerB',
              component: RouterB
            }
          ]
        }
      ]
    })

好了，index 路由就配置好了，现在我们来使用它，将 components 下的 hello.vue 内部代码修改如下：

    <template>
      <div class="hello">
        <router-link to="/routerA">这是1</router-link>
        <router-link to="/routerB">这是2</router-link>
        <div>
          // 这里会显示我们映射过来的组件
          <router-view></router-view>
        </div>
      </div>
    </template>

    <script>
    export default {
      name: 'hello',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      display: inline-block;
      margin: 0 10px;
    }

    a {
      color: #42b983;
    }
    </style>

至此，嵌套路由就可以使用了，以上代码亲测

本文纯手打，有不当之处请留言！谢谢！

Vue-Router(一) 嵌套路由

Vue-Router(一) 嵌套路由

猜你喜欢