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

嵌套路由实现效果：

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

注意:

渲染子路由内容的<router-view/>可以和跳转子路由的router-link的按钮可以不在一个页面上

用重定向跳转嵌套路由得时候，参数不但可以传到里面那层得<router-view/>里面显示得组件得内容里面，而且在放里面那个<router-view/>的那个页面也能获取到

定义:

<router-view/>里面还有<router-view/>，呢种就叫嵌套路由

配置实现:

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里面的重定向调用方式

<router-link  :to="`/UserPath`" class="astyle" >user</router-link>

在调用Users组件的页面如果不需要Users里面的重定向可以使用命名路由

<router-link  :to="{ name: 'userrotesss'}" class="astyle">user</router-link>

 

3.在user页面的leftcs里面定义router-link 路由链接,在rightcs里面进行子组件内容的渲染

<div class="content">

  <div class="leftcs">

    <ul class="ulcs">

      <!--普通路由跳转-->

      <!-- <li class="lics"><router-link :to="`/UserPath/userlist`">userlist</router-link></li>

      <li class="lics"><router-link :to="`/UserPath/useradd`">useradd</router-link></li> -->

      <!--命名路由跳转-->

      <li class="lics"><router-link :to="{ name:'nana1' }">userlist</router-link></li>

      <li class="lics"><router-link :to="{ name:'nana2' }">useradd</router-link></li>

    </ul>

  </div>

 <!--子组件的内容将渲染到下面的router-view-->

  <div class="rightcs">

    <router-view></router-view>

  </div>

</div>

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

<style>

.content{

  /* 让里面DIV的元素横向排列 */

display: flex;

}

.leftcs{

width:200px;

min-height: 400px;

border-right: 1px solid #eee;

}

.rightcs{

  /* 右边自适应 */

  flex: 1;

}

.ulcs{

  list-style: none;

}

.lics{

 margin-bottom: 20px;

 text-align: center;

 padding-top: 20px;

}

</style>

<script>

export default {

  name:  'UserFrom',

  props: {

  }

};

</script>