(九)vue-route嵌套路由或者一级路由点击链接如何把链接对应的组件的内容加载到指定的<router-view/>进行渲染

实现效果:

多个<router-view/>的时候，点击不同的router-link,将内容加载到不同的<router-view/>里面进行渲染

注意:

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

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

实现代码:

1：一级路由实现动态选择<router-view/>进行组件渲染

(1):比如在app.vue定义两个<router-view/>，给每个<router-view/>取一个名字

<div>

    <router-view name="ccc"></router-view>

    yyy

  </div>

  <div>

    xxx

    <br><br><br>

  <router-view name="ddd"></router-view>

    </div>

  </div>

 (2)router.js里面给对应的路由指定到对应的</router-view>,以后加载信息就加载对他指定的呢个</router-view>里面

下面的ccc,ddd就是对应选择上面的router-view的名称,之后点击下面的路由就会把内容加载到对应的名称下面的router-view

routes:[

{ path: '', redirect:"/home" },//配置重定向,页面路径不跟任何路径的时候就加载下面的/home路径下面对应的组件

{ path: '/home',components: {ccc:Home}},

{ path: '/NewsPath' ,name:"NewsPathRoute",components: {ddd: News},},

]

(3):在home.vue写对应的跳转,跳转到/NewsPath路径下面对应的组件

<div>

     <br><br><br><br><br><br>

    <router-link :to="`/NewsPath`" class="astyle" >News</router-link>

  </div>

(4):最终达到的效果：

默认页面/home对应的组件的内容会加载到yyy的上面

点击home.vue里面的News链接的时候对应的组件会加载到xxx下面，

这就达到了一级路由链接选择指定的</router-view>加载的效果

 

2：嵌套路由实现动态选择<router-view/>进行组件渲染跟上面的一级路由的方式其实是一样的

下面的an，bc会找到对应的</router-view>进行对应渲染

(1)router.js配置

routes:[

 { path: '/UserPath',  name:'userrotesss',component: Users,//component: Users,

  components: {

    ddd: Users

  },

    children:[

      //如果要使用这里定义的重定向,app.vue里router-link路由跳转到user.vue的时候不能使用命名路由，只能使用普通路由,否则重定向无效

      //还可以专门拿一个页面来做重定向页面

    {path:'',redirect:"/UserPath/userlist"},

    {path:'userlist',components:{an:userlist},name:"nana1"},

    {path:'useradd',components:{bc:useradd},name:"nana2"},

  ]},

]

(2)app.vue做一个跳转链接

注意：如果要使用UserPath下面的重定向redirect:"/UserPath/userlist"这里不能使用命名路由，只能使用普通路由进行跳转

<ul class="ulstyle">

    <li class="astyle1">

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

</li>

  </ul>

 (3)user.vue页面进行对应的子组件的渲染，下面的an，bc的router-view的渲染就会渲染router.js里面对应的an，bc链接里面的组件内容，就达到点点映对应的链接跳转到指定的router-view的效果

<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>

  <div class="rightcs" >

    111

    <router-view name="an"></router-view>

  </div>

   <div class="rightcs">

     222

    <router-view name="bc"></router-view>

  </div>

</div>

 

(4)页面对应的一些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>