Vue学习笔记(29)-多级(嵌套)路由以及query参数的传递

Vue路由-多级(嵌套)路由

• 多级路由的使用其实与一级路由是十分相似的,但是有以下几个注意点:
• 在一级路由下(父级路由下)添加一个受其管理的二级路由需要用到children属性如下:
• router-index.js

  // 创建并向外暴露路由器
  export default new VueRouter({
      // 一级路由
      routes:[
          {   
              //设置管理路由:About
              path:'/about',
              component: About
          },
          {   
              //设置管理路由:Home
              path:'/home',
              component: Home,
              
              // 二级路由(children属性)
              children:[//通过children配置子级路由
                  {
                      // 使用二级路由过后的path不需要再加上"/"
                      path:'message',
                      component: Message,
                  },
              ]
          },
  
      ]
  })

• 2.在组件当中跳转子级路由需要写完整路径:

  <router-link to="/home/news">News</router-link>

完整代码如下:(除去About组件,与一级路由没区别)

• index.js

  // 这里配置路由(创建整个应用页面的路由器)
  
  // 首先引入路由
  import VueRouter from "vue-router";
  
  // 引入各个组件
  import About from '../pages/About'
  import Home from '../pages/Home'
  import Message from '../pages/Message'
  import News from '../pages/News'
  
  // 创建并向外暴露路由器
  export default new VueRouter({
      // 一级路由
      routes:[
          {   
              //设置管理路由:About
              path:'/about',
              component: About
          },
          {   
              //设置管理路由:Home
              path:'/home',
              component: Home,
              
              // 二级路由(children属性)
              children:[//通过children配置子级路由
                  {
                      // 使用二级路由过后的path不需要再加上"/"
                      path:'message',
                      component: Message,
                  },
                  {
                      // 使用二级路由过后的path不需要再加上"/"
                      path:'news',
                      component: News,
                  }
              ]
          },
  
      ]
  })

• Home组件(除去css样式)

  <template>
      <div>
          <h2>Home组件内容</h2>
          <div>
              <ul class="nav nav-tabs">
                  <li>
                      <!-- 使用路由提供的router-link实现页面跳转-->
                      <!-- (router-link最终会转化为a白标签显示到页面上)  -->
                      <!-- 使用active-class属性能够实现响应式切换css样式 -->
                      <!-- 使用to="/指定组件拼接的网址url(在路由器里面设定的path属性)" -->
                      <!-- 这里的to属性路径要补全: /home/news(指定跳向一级路由下的二级(嵌套或多级)路由)-->
                  <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
                  </li>
                  <li>
                      <!-- 使用路由提供的router-link实现页面跳转-->
                      <!-- (router-link最终会转化为a白标签显示到页面上)  -->
                      <!-- 使用active-class属性能够实现响应式切换css样式 -->
                      <!-- 使用to="/指定组件拼接的网址url(在路由器里面设定的path属性)" -->
                      <!-- 这里的to属性路径要补全: /home/news(指定跳向一级路由下的二级(嵌套或多级)路由)-->
                  <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
                  </li>
              </ul>
              <div>
                  <!-- 使用vue-router插件库提供的router-view标签实现指定区域显示组件 -->
                  <router-view></router-view>
              </div>
          </div>
      </div>
  </template>
  
  <script>
      export default {
          name : 'Home' ,
      }
  </script>

• Message组件

  <template>
      <ul>
          <li>
              <a href="/message1">message001</a>&nbsp;&nbsp;
          </li>
          <li>
              <a href="/message2">message002</a>&nbsp;&nbsp;
          </li>
          <li>
              <a href="/message/3">message003</a>&nbsp;&nbsp;
          </li>
      </ul>
  </template>
  
  <script>
      export default {
          name : 'News'
      }
  </script>

• News组件

  <template>
      <ul>
          <li>news001</li>
          <li>news002</li>
          <li>news003</li>
      </ul>
  </template>
  
  <script>
      export default {
          name : 'News'
      }
  </script>

结果展示:

• 页面发生跳转但是浏览器没有刷新,观察网页url也发生了变化
  

2.query参数(主要用于参数的传递)

• 路由中的query参数与ajax中的query参数是非常的相似的,基本上都是写在path或者url上用于给请求者携带额外的数据的,一般用”?”分割path或者url,用”&”拼接数据如下:

  <router-link :to="`/home/message/detail?id=666&title=你好阿!`"></router-link>

  

案例展示:

• 除去main.js和其他无关紧要的组件[与上一个案例:多级路由的使用一致]

• 要求：消息组件下还有一个三级路由，管理消息的发放

• router-index.js

  // 这里配置路由(创建整个应用页面的路由器)
  
  // 首先引入路由
  import VueRouter from "vue-router";
  
  // 引入各个组件
  import About from '../pages/About'
  import Home from '../pages/Home'
  import Message from '../pages/Message'
  import News from '../pages/News'
  import Detail from '../pages/Detail'
  
  // 创建并向外暴露路由器
  export default new VueRouter({
      // 一级路由
      routes:[
          {   
              //设置管理路由:About
              path:'/about',
              component: About
          },
          {   
              //设置管理路由:Home
              path:'/home',
              component: Home,
              
              // 二级路由(children属性)
              children:[//通过children配置子级路由
                  {
                      // 使用二级路由过后的path不需要再加上"/"
                      path:'message',
                      component: Message,
                      
                      // 使用三级路由
                      children:[
                          {
                              path:'detail',
                              component: Detail,
                          }
                      ]
                  },
                  {
                      // 使用二级路由过后的path不需要再加上"/"
                      path:'news',
                      component: News,
                  }
              ]
          },
  
      ]
  })

• Message组件(除去css样式)

  <template>
      <div>
          <ul>
              <li  v-for="m in messageList" :key="m.id">
                  <!-- 这里使用常规的方法然url携带query[与ajax里面的query参数一致]参数 -->
                  <!-- query参数是用于携带url信息的 -->
                  <!-- 跳转路由并携带query参数 -->
                  <!-- 使用ES6的模板字符串``携带数据即可(${需要携带的数据}) -->
  
                  <!-- 方法一[to的字符串写法]:比较笨重,不推荐 -->
                  <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
  
                  <!-- 方法二[to的对象写法]:使用对象的形式携带数据,简洁推荐 -->
                  <router-link :to="{
                      path: '/home/message/detail',
                      query: {
                          id: m.id,
                          title: m.title},
                      }"
                  >{{m.title}}</router-link>
              </li>
          </ul>
          <hr>
          <router-view></router-view>
      </div>
  </template>
  
  <script>
      export default {
          name : 'News',
          data() {
              return {
                  messageList : [
                      {id:'001',title:'消息001'},
                      {id:'002',title:'消息002'},
                      {id:'003',title:'消息003'},
                  ]
              }
          },
      }
  </script>

• Detail组件(三级路由,由Message组件管理)

  <template>
      <ul>
          <!-- 输出本地route上的query身上的指定参数即可 -->
          <li>消息编号:{{this.$route.query.id}}</li>
          <li>消息标题:{{this.$route.query.title}}</li>
      </ul>
  </template>
  
  <script>
      export default {
          name : 'Detail',
          mounted(){
              // 输出本地的route发现里面多了一个query参数
              // query参数里面携带者url传过来的数据
              console.log(this.$route);
          }   
      }
  </script>

• 从这个mounted钩子上可以观察到query参数的传递存在本地路由$route身上
  

结果展示: