Experience using Vue three-layer nested routing

This time I will bring you the experience of using Vue's three-layer nested routing. What are the precautions when using Vue's three-layer nested routing? The following is a practical case, let's take a look.

Vue nested routing:

Achieve the effect (the routing is nested at three levels, click on the first-level tab to display the second-level tab effect, click on the second-level tab to switch the corresponding content, Content not in the tab area will not be rendered repeatedly when switching):

Demo access path: http://IP:port/#/routers/

1. Create the case folder page/routers/

1 routers/index.vue

<template>
 <p>
   <router-link :to="{name: &#39;rindex_rhome&#39;}" class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">首页</router-link>
   <router-link :to="{name: &#39;rindex_rnews&#39;}" class="rlink" class="{active:selected == 2}" @click.native="tabck(2)">新闻</router-link>
   <router-link :to="{name: &#39;rindex_ryl&#39;}" class="rlink" class="{active:selected == 3}" @click.native="tabck(3)">娱乐</router-link>
  
    <!-- 二级子路由页面 -->
    <router-view />
 </p>
</template>
<script>
export default {
 data(){
  return {
     selected: 1
  }
 },
 methods: {
  tabck(index){
    this.selected = index; //设置tab选中项
  }
 }
}
</script>
<style>
 .rlink {
  padding: 5px;
  margin: 5px;
  margin-bottom: 10px;
  display: inline-block;
  text-decoration: none;
  color: blue;
 }
 .rlink.active {
  color: red;
  text-decoration: underline;
 }
</style>

1-1- 1 routers/home/index.vue

<template>
 <p>
   HOME页面信息：<br/>
   <router-link :to="{name: &#39;rindex_rhome_Rhomezx&#39;}" class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">最新HOME</router-link>
   <router-link :to="{name: &#39;rindex_rhome_Rhomegj&#39;}" class="rlink" :class="{active:selected == 2}" @click.native="tabck(2)">国际HOME</router-link>
   <router-link :to="{name: &#39;rindex_rhome_Rhomegn&#39;}" class="rlink" :class="{active:selected == 3}" @click.native="tabck(3)">国内HOME</router-link>
  
  <!-- 子路由(三层) -->
   <router-view />
 </p>
</template>
<script>
 export default {
  data(){
    return {
      selected: 1
    }
  },
  methods: {
   tabck(index) {
     this.selected = index; //设置选中tab
   }
  }
 }
</script>
<style>
</style>

1-1-2 routers/home/tab/gj.vue、gn.vue、zx.vue

gj.vue：

<template>
 <p>
    国际HOME信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'国际HOME'},
      {name:'国际HOME'},
      {name:'国际HOME'}
     ]
   }
  }
 }
</script>

gn.vue:

<template>
 <p>
    国内HOME信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'国内HOME'},
      {name:'国内HOME'}
     ]
   }
  }
 }
</script>

zx.vue：

<template>
 <p>
    最新HOME信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'最新HOME'}
     ]
   }
  }
 }
</script>

1-2 routers/news/index.vue

<template>
 <p>
    新闻页面信息：<br/>
    <router-link class="rlink" :class="{active:selected == 1}" @cllick.native="tabck(1)">最新新闻</router-link>
    <router-link class="rlink" :class="{active:selected == 2}" @cllick.native="tabck(2)">国际新闻</router-link>
    <router-link class="rlink" :class="{active:selected == 3}" @cllick.native="tabck(3)">国内新闻</router-link>
  <!-- 子路由 -->
  <router-view/>
 </p>
</template>
<script>
 export default {
  data () {
   return {
     selected: 1
   }
  },
  methods: {
   tabck(index){
    this.selected = index; //切换tab，设置选中项
   }
  } 
 }
</script>

1-2-1 routers/ news/tab/gj.vue、gn.vue、zx.vue

gj.vue：

<template>
 <p>
    国际新闻信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'国际新闻信息'},
      {name:'国际新闻信息'},
      {name:'国际新闻信息'},
      {name:'国际新闻信息'},
      {name:'国际新闻信息'}
     ]
   }
  }
 }
</script>

gn.vue：

<template>
 <p>
    国内新闻信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'国内新闻信息'},
      {name:'国内新闻信息'}
     ]
   }
  }
 }
</script>

zx.vue：

<template>
 <p>
    最新新闻信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'最新新闻信息'},
      {name:'最新新闻信息'}
     ]
   }
  }
 }
</script>

1-3-1 routers/yl/index.vue

<template>
 <p>
    娱乐页面信息：<br/>
    <router-link class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">最新娱乐</router-link>
    <router-link class="rlink" :class="{active:selected == 2}" @click.native="tabck(2)">明星娱乐</router-link>
    <router-link class="rlink" :class="{active:selected == 3}" @click.native="tabck(3)">焦点娱乐</router-link>
   
    <!-- 子路由-->
    <router-view/>
 </p>
 <script>
  export default {
   data(){
    return {
     selected: 1
    }
   },
   methods: {
    tabck(index){
     this.selected = index; //设置tab选中项
    }
   }
  }
 </script>
</template>

1-3-2 routers/yl/tab/jd.vue、mx.vue、zx.vue

jd.vue：

<template>
 <p>
    焦点娱乐信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'焦点娱乐信息'},
      {name:'焦点娱乐信息'}
     ]
   }
  }
 }
</script>

mx.vue：

<template>
 <p>
    明星娱乐信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'明星娱乐信息'},
      {name:'明星娱乐信息'}
     ]
   }
  }
 }
</script>

zx.vue：

<template>
 <p>
    最新娱乐信息：<br/>
     <ul >
       <li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
     </ul>
 </p>
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:'最新娱乐信息'},
      {name:'最新娱乐信息'}
     ]
   }
  }
 }
</script>

2. Routing configuration rules (router/index.js)

....
 省略导入路由、使用路由代码...
....
// 嵌套路由的使用：第一层
import Rindex from '../page/routers/index'
// 嵌套路由的使用：第二层
import Rhome from '../page/routers/home/index'
// 嵌套路由的使用：第三层
import Rhomezx from '../page/routers/home/tab/zx'
import Rhomegj from '../page/routers/home/tab/gj'
import Rhomegn from '../page/routers/home/tab/gn'
import Rnews from '../page/routers/news/index'
import Rnewszx from '../page/routers/news/tab/zx'
import Rnewsgj from '../page/routers/news/tab/gj'
import Rnewsgn from '../page/routers/news/tab/gn'
import Ryl from '../page/routers/yl/index'
import Rylzx from '../page/routers/yl/tab/zx'
import Rylmx from '../page/routers/yl/tab/mx'
import Ryljd from '../page/routers/yl/tab/jd'
// 路由规则配置：
export default new Router({
 routes : [
  {
   name: 'rindex',
   path: '/routers',
   component: Rindex,
   redirect: {name: 'rindex_rhome'}, // 跳转到下一级第一个
   children: [
     {
       name: 'rindex_rhome',
       path: 'rindex_rhome', //如果这里不使用 "/rhome" 则表示是归属于上级路由（上级luyou/子path），如果使用 "/rhome" 则表示根路径下访问
       component: Rhome,
       redirect: {name: 'rindex_rhome_Rhomezx'}, //跳转到下级第一层
       children: [
        {
         name: 'rindex_rhome_Rhomezx',
         path: 'rindex_rhome_Rhomezx',
         component: Rhomezx
        },
        {
         name: 'rindex_rhome_Rhomegj',
         path: 'rindex_rhome_Rhomegj',
         component: Rhomegj
        },
        {
         name: 'rindex_rhome_Rhomegn',
         path: 'rindex_rhome_Rhomegn',
         component: Rhomegn
        }
      ]
     },
     {
      name: 'rindex_rnews',
      path: 'rindex_rnews',
      component: Rnews,
      redirect: {name: 'rindex_rnews_Rnewszx'},
      children: [
       {
         name: 'rindex_rnews_Rnewszx',
         path: 'rindex_rnews_Rnewszx',
         component: Rnewszx
       },
       {
         name: 'rindex_rnews_Rnewsgj',
         path: 'rindex_rnews_Rnewsgj',
         component: Rnewsgj
       },
       {
         name: 'rindex_rnews_Rnewsgn',
         path: 'rindex_rnews_Rnewsgn',
         component: Rnewsgn
       }
      ]
    },
    {
      name: 'rindex_ryl',
      path: 'rindex_ryl',
      component: Ryl,
      redirect: {name: 'rindex_ryl_rylzx'},
      chidren:[
        {
          name: 'rindex_ryl_rylzx',
          path: 'rindex_ryl_rylzx',
          component: Rylzx
        },
        {
          name: 'rindex_ryl_rylmx',
          path: 'rindex_ryl_rylmx',
          component: Rylmx
        },
        {
          name: 'rindex_ryl_ryljd',
          path: 'rindex_ryl_ryljd',
          component: Ryljd
        }
      ]
    }
   ]
  }
 ]
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of Vue.js calculation and use of listener properties

H5’s data-* Detailed explanation of defining attribute usage

The above is the detailed content of Experience using Vue three-layer nested routing. For more information, please follow other related articles on the PHP Chinese website!