vue怎么嵌套多级路由页面打不开_Vue.js - 路由 vue-router 的使用详解10（嵌套路由、二级路由）...

在一个项目中可以嵌套使用多个 组件，这种情况就需要用到嵌套路由。下面以一个使用二级路由的样例进行演示，更多层级的路由实现原理是一样的。

1，样例代码

(1)App.vue

页面中有一个 组件用来渲染显示一级路由的页面组件。

同时组件上方有四个链接(后两个为嵌套路由，其中 hangge为参数)，点击后进行页面的切换。

/

/user/hangge

/user/hangge/profile

/user/hangge/posts

export default {

name: 'App',

}

(2)router/index.js

路由配置文件中通过 children属性配置子路由。

为方便演示这里我的页面组件直接通过 template定义，没有创建单独的 vue文件。

特别注意 User这个页面组件，它的内部又包含了一个组件，用于渲染显示二级路由的页面组件。

import Vue from 'vue'

import Router from 'vue-router'

//Vue全局使用Router

Vue.use(Router)

//首页模块

const Index = {

template: `

欢迎访问 hangge.com

`

}

//用户模块

const User = {

template: `

你好：{{ $route.params.userName }}

`

}

//用户模块下的子模块

const UserHome = { template: '

Home

' }

const UserProfile = { template: '

Profile

' }

const UserPosts = { template: '

Posts

' }

export default new Router({

routes: [

{

path: '/',

name: 'index',

component: Index

},

{

path: '/user/:userName',

name: 'user',

component: User,

children: [

{ path: '', component: UserHome },

{ path: 'profile', component: UserProfile },

{ path: 'posts', component: UserPosts }

]

}

]

})

2，运行效果

(1)点击前面两个链接可以进行一级路由的跳转。

   

(2)而点击后面两个链接可以进行二级路由的跳转。