15.Vue二级路由

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'import Login from '@/components/Login'import index from '@/components/index'import Header from '@/components/Header/Header'import Product from '@/components/Product/Product'Vue.use(Router)

export defaultnewRouter({

  //vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

//如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。

   mode: 'history',//可以是去掉#号

  routes: [

    {

      path: '/',

      name: 'Login',

      component: Login

    },

    {

      path: '/index',

      name: 'index',

      component: index,

      children: [  //这里就是二级路由的配置        {

          path: '/hello',

          name: 'Hello',

          component: Hello

        },

        {

          path: '/header',

          name: 'Header',

          component: Header

        },

        {

          path: '/product',

          name: 'Product',

          component: Product

        }

      ]

    }

  ]

})

你可能感兴趣的:(15.Vue二级路由)