(八)vue-route路由嵌套(父子路由),以及在里面加上重定向的作用

嵌套路由实现效果：

一个渲染的组件内容里面有两个div,点击左边div的链接,右边div加进行子路由对应的组件内容的渲染

定义:

渲染的组件里面还有渲染组件内容，呢种就叫嵌套路由

配置实现:

1：嵌套路由router.js的配置

  routes:[      { path: '/UserPath', component: Users, name:'userrotesss',     children:[       //重定向的意义,比如显示东西的地方在没有数据的时候需要默认加载一个页面,呢时候就需要重定向到一个默认加载的页面       //在调用Users组件的页面,如果要使用Users里面的重定向,不能使用命名路由,否则第一次进入Users的时候无法使用里面的重定向       //在Users页面内部渲染子组件的时候可以使用命名路由，使用重定向的时候     {path:'',redirect:"/UserPath/userlist"},     {path:'userlist',component:userlist,name:"nana1"},     {path:'useradd',component:useradd,name:"nana2"},]      },  ]   2:调用Users组件 在调用Users组件的页面如果使用Users里面的重定向调用方式 user 在调用Users组件的页面如果不需要Users里面的重定向可以使用命名路由 user   3.在user页面的leftcs里面定义router-link 路由链接,在rightcs里面进行子组件内容的渲染

 

   

                       
• userlist
     
• useradd
   

 

   

     

 /* 在user里面定义对应的css样式 */