本篇文章给大家分享的是有关vue router2.0中如何使用二级路由，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
1、app.vue中
<template>
<div id="app">
<router-view></router-view>
</div>
</template>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: 'Hello',
component: Hello
},
{
path: '/header',
name: 'Header',
component: Header
},
{
path: '/product',
name: 'Product',
component: Product
}
]
}
]
})3、下面是我们的index.vue中的代码
<template>
<div class="aaa">
<div class="list-group">
<router-link to="/hello">Go to hello</router-link>
<router-link to="/header">Go to header</router-link>
<router-link to="/product">Go to product</router-link>
<input type="text" v-model="username">
<button v-click="text"></button>
<router-view></router-view>
</div>
</div>
</template>以上就是vue router2.0中如何使用二级路由，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。
