二级路由的建立
1、在pages下再分别建立 One.vue, Two.vue两个组件
2、然后在main.js中使用
import One from './pages/One.vue'
import Two from './pages/Two.vue'
导入这两个模块
3、 然后在相应的组件路由规则中使用 children 关键字去配置路由规则,再次选择market中做实例:
const routes = [
{path: '', component: Home},
{path: '/home', component: Home},
{path: '/cart', component: Cart},
{path: '/market', component: Market,children:[
{path: '', component:One},
{path: 'one', component: One},
{path: 'two', component: Two}
]},
{path: '/mine', component: Mine}
]
4、再去对应的Market.vue组件中呈现组件内容:
<router-link to="/market/one">二级组件之一</router-link>
<router-link to="/market/two">二级组件之二</router-link>
<router-view></router-view>