vue router2.0二级路由的简单使用

vue router2.0二级路由的简单使用

本文实例为大家分享了vue router2.0二级路由的具体代码，供大家参考，具体内容如下

1、app.vue中

2、router中index.js(路由的路径配置)

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 default new Router({

routes: [

{

path: '/',

name: 'Login',

component: Login

},

{

path: '/index',

name: 'index',

component: index,

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

{

path: '/hello',

name: 'Helhttp://lo',

component: Hello

},

{

path: '/header',

name: 'Header',

component: Header

},

{

path: '/product',

name: 'Product',

component: Product

}

]

}

]

})

3、下面是我们的index.vue中的代码

Go to hello

Go to header

Go to product

4、最后就是新建hello、header、product这几个组件来验证我们的效果，这里就不做演示了，因为我自己已经测试过了，没有问题

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。