美文网首页
15.Vue二级路由

15.Vue二级路由

作者: 寄鱼予海与你 | 来源:发表于2018-06-01 11:01 被阅读0次

    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二级路由

          本文链接:https://www.haomeiwen.com/subject/ehvhsftx.html