AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue —— 进阶 vue-router 路由（一）（嵌套路由、query参数、命名路由、params参数、props配置）

2023-06-14 155
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue —— 进阶 vue-router 路由（一）（嵌套路由、query参数、命名路由、params参数、props配置）

一、嵌套路由（多级路由）

1. 配置路由规则

使用 children 配置项

  routes: [{
        path: '/about',
        component: About
      },
      {
        path: '/home',
        component: Home,
        children: [{ //通过children配置子级路由
              path: 'news', //此处没有 /
              component: News
            },
            {
              path: 'message', //此处没有 /
              component: Message
         }]
     }]
2. 跳转（写完整路径）
  <router-link to="/home/news">News</router-link>
3. 实例：嵌套路由

https://www.bilibili.com/video/BV1R5411Q7hZ?t=1.1

嵌套路由

index.js

  1. 给 home 通过 children 配置子级路由
  2. path里面不加 /
  3. component 并没有 s，因为都是一个组件
  import VueRouter from "vue-router";
  // 引入组件
  import About from '../pages/About.vue'
  import Home from '../pages/Home.vue'
  import News from '../pages/News.vue'
  import Message from '../pages/Message.vue'
  // 创建并暴露一个路由器
  export default new VueRouter({
    routes: [{
          path: '/about',
          component: About
        },
        {
          path: '/home',
          component: Home,
          children: [{ //通过children配置子级路由
                path: 'news', //此处没有 /
                component: News
              },
              {
                path: 'message', //此处没有 /
                component: Message
              }]
         }]
  })

News.vue

  1. 显示 news 内容的组件
  <template>
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  </template>
  <script>
  export default {
    name: "myNews",
  };
  </script>

Message.vue

  1. 显示 message 内容的组件
  <template>
    <div>
      <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>
    </div>
  </template>
  <script>
  export default {
    name: "myMessage",
  };
  </script>

Home.vue

  1. 注意路径要写全，/home/news、/home/message
  <template>
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul class="nav nav-tabs">
          <li>
            <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
          </li> 
          <li> 
            <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "myHome",
  };
  </script>

二、路由的 query 参数

1. 传递参数

方法一：to 的字符串写法，v-bind 绑定 to，地址和值用模板字符串包裹。

  <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}！`">{{ m.title }}</router-link>

方法二：to 的对象写法，v-bind 绑定 to，在对象中配置 path 和 query，path 是路径，query 里面是参数。

  <router-link :to="{
      path: '/home/message/detail',
      query: {
        id: m.id,
        title: m.title 
      }
    }">{{ m.title }}</router-link>
2. 接收参数
  $route.query.id
  $route.query.title
3. 实例：路由的 query 参数

https://www.bilibili.com/video/BV1s3411P7dr?t=1.2

路由的query参数

index.js

  1. 在 index.js 的 Message 中添加 Detail 子级
  import Detail from '../pages/Detail.vue'
  ...
  {
      path: 'message', //此处没有 /
      component: Message,
      children: [
        {
          path: 'detail', //此处没有 /
          component: Detail
        },
      ]
    }

Message.vue

  1. 一般采用对象写法，可读性高
  2. to 要用 v-bind 绑定
  3. path 用于配置路径
  4. query 里面传递参数
  <template>
    <div>
      <ul>
        <li v-for="m in messageList" :key="m.id">
          <!-- 跳转路由并携带query参数，to的字符串写法 -->
          <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}！`">{{ m.title }}</router-link> -->
          <!-- 跳转路由并携带query参数，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: "myMessage",
    data() {
      return {
        messageList: [
          { id: "001", title: "消息001" },
          { id: "002", title: "消息002" },
          { id: "003", title: "消息003" },
        ],
      };
    },
  };
  </script>

Detail.vue

  1. 接收参数，呈现在页面
  <template>
    <ul>
      <li>消息编号：{{$route.query.id}}</li>
      <li>消息标题：{{$route.query.title}}</li>
    </ul>
  </template>
  <script>
  export default {
    name: "myDetail",
    mounted() {
        console.log(this.$route);
    },
  };
  </script>

三、命名路由

1. 作用

可以简化路由的跳转

2. 如何使用
  1. 给路由命名：name: 'xxx'
  routes: [{
      path: '/demo',
      component: Demo,
      children: [{
        path: 'test',
        component: Test,
        children: [{
          name: 'hello'
          path: 'welcome',
          component: Hello
      }]
    }]
  }]
  1. 简化跳转
    （1）to 要加 v-bind 绑定
    （2）to 里面是对象的键值对形式，{name: 'xxx'}
  <!-- 简化前，需要写完整的路径 -->
  <router-link to='demo/test/welcome'>跳转</router-link>
  <!-- 简化后，直接通过名字跳转 -->
  <router-link :to='{name: 'hello'}'>跳转</router-link>

  <!-- 简化写法配合query传递参数 -->
  <router-link
    :to="{
      name: 'hello',
      query: {
        id: 666,
        title: '你好'
      }
    }"
  >跳转</router-link>

四、路由的 params 参数

1. 配置路由

配置路由，声明接收 params 参数

  routes: [{
      path: '/home',
      component: Home,
      children: [{
        path: 'news',
        component: News,
        {
        component: Message,
        children: [{
          name: 'xiangqing'
          path: 'detail/:id/:title', //使用占位符声明接收params参数
          component: Detail
        }]
      } 
    }]
  }]
2. 传递参数

to 的字符串写法

  <!-- 跳转并携带params参数，to的字符串写法 -->
  <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>

to 的对象写法

  <!-- 跳转并携带params参数，to的对象写法 -->
  <router-link :to="{
      name: 'xiangqing',
      params: {
        id: m.id,
        title: m.title 
      }
    }">
      {{ m.title }}
    </router-link>

注意：路由携带 params 参数时，若使用 to 的对象写法，则不能使用 path 配置，必须使用 name 配置！

3. 接收参数
  $route.params.id
  $route.params.title
4. 实例：路由的 params 参数

https://www.bilibili.com/video/BV195411Q7E3?t=1.1

路由的params参数

index.js

  routes: [{
      path: '/home',
      component: Home,
      children: [{
        path: 'news',
        component: News,
        {
        component: Message,
        children: [{
          name: 'xiangqing'
          path: 'detail/:id/:title', //使用占位符声明接收params参数
          component: Detail
        }]
      } 
    }]
  }]

Message.vue

  <template>
    <div>
      <ul>
        <li v-for="m in messageList" :key="m.id">
          <!-- 跳转路由并携带params参数，to的字符串写法 -->
          <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->
          <!-- 跳转路由并携带params参数，to的对象写法 -->
          <router-link :to="{
            name: 'xiangqing',
            params: {
              id: m.id,
              title: m.title 
            }
          }">
            {{ m.title }}
          </router-link>
        </li>
      </ul>
      <hr />
      <router-view></router-view>
    </div>
  </template>
  <script>
  export default {
    name: "myMessage",
    data() {
      return {
        messageList: [
          { id: "001", title: "消息001" },
          { id: "002", title: "消息002" },
          { id: "003", title: "消息003" },
        ],
      };
    },
  };
  </script>

Detail.vue

  <template>
    <ul>
      <li>消息编号：{{$route.params.id}}</li>
      <li>消息标题：{{$route.params.title}}</li>
    </ul>
  </template>
  <script>
  export default {
    name: "myDetail",
    mounted() {
        console.log(this.$route);
    },
  };
  </script>

五、路由的 props 配置

1. 作用

让路由组件更方便的收到数据

2. 三种写法
（1）第一种写法
  1. 第一种写法：props 的值为对象。该对象中的所有 key-value 都会以 props的形式传给 Detail 组件。
  2. 注意：使用的少，因为传递的是死数据。
  //语法：
  props:{a: 1, b: 'hello'}

index.js

  children:[{
      name: 'xiangqing',
      path: 'detail/:id/:title',
      component: Detail,
      props:{a: 1, b: 'Hello'}
    }]

Detail.vue

  <template>
    <ul>
      <li>消息编号：{{$route.params.id}}</li>
      <li>消息标题：{{$route.params.title}}</li>
      <li>a:{{a}}</li>
      <li>b:{{b}}</li>
    </ul>
  </template>
  <script>
  export default {
    name: "myDetail",
    props: ['a','b'],
    mounted() {
        console.log(this.$route); 
    },
  };
  </script>

f2f1ae1f8c434c9f8e79b2cf499da9d5.png

（2）第二种写法
  1. 第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有 params 参数，以 props 的形式传给 Detail 组件。
  2. 注意：只能传递 params 参数，不会传递 query 参数。
  //语法：
  props: true

index.js

  children:[{
      name: 'xiangqing',
      path: 'detail/:id/:title',
      component: Detail,
      props: true
    }]

Detail.vue

  <template>
    <ul>
      <li>消息编号：{{id}}</li>
      <li>消息标题：{{title}}</li>
    </ul>
  </template>
  <script>
  export default {
    name: "myDetail",
    props: ['id','title'],
    mounted() {
        console.log(this.$route); 
    },
  };
  </script>

6baf46cfad81476bb38b04355fd29d01.png

（3）第三种写法
  1. props 的第三种写法，值为函数。该函数返回的对象中每一组 key-value 都会通过 props 传给 Detail 组件。
  2. 该写法既能传递 params 参数，也能传递 query 参数。
  props($route){
    return {
    id: $route.query.id,
    title: $route.query.title
    }
  }

index.js

  props($route) {
    return {
    id: $route.query.id,
    title: route.query.title
    }
  }

  //简写方式，解构
  props({params}) {
      return {id: params.id, title:params.title}
    }



  //进一步简写（可读性差，不推荐）
  props({params: {id, title}}) {
      return {id, title}
    }

Detail.vue

  <template>
    <ul>
      <li>消息编号：{{id}}</li>
      <li>消息标题：{{title}}</li>
    </ul>
  </template>
  <script>
  export default {
    name: "myDetail",
    props: ['id','title'],
    mounted() {
        console.log(this.$route); 
    },
  };
  </script>

0f50a0f0a0aa4f1daefa066527523787.png

不积跬步无以至千里 不积小流无以成江海

文章标签：
JavaScript
关键词：
vue配置VUE.js
VUE.js配置
vue路由VUE.js
路由配置VUE.js
vue嵌套VUE.js
前端杂货铺
目录
相关文章
你都不懂
|
3月前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
你都不懂
219 1
chnjames
|
3月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表，支持用户动态添加设备部位和任务，并提供相应的表单验证规则。
chnjames
281 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
周一同学Zelina
|
4月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理，包括设置嵌套路由和实现多级路由导航的示例。
周一同学Zelina
783 1
dufadayang
|
3月前
|
JavaScript
vue3，使用watch监听props中的数据
【10月更文挑战第3天】
dufadayang
1898 2
六卿
|
4月前
|
JSON JavaScript 数据格式
Vue路由params、query参数丢失解决
该文章介绍了在Vue中使用`params`和`query`进行路由参数传递时，如何通过`sessionStorage`或`localStorage`解决参数丢失的问题。
六卿
123 2
六卿
|
4月前
Vue3基础(十san)___父子组件通信___props、emit___provide、inject
文章介绍了Vue3中父子组件通信的两种方式：通过`props`和`emit`传递数据和事件，以及使用`provide`和`inject`在组件树中传递数据。
六卿
65 0
Vue3基础(十san)___父子组件通信___props、emit___provide、inject
热爱技术的小郑
|
5月前
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名（3）（2022/9/5）
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式，并通过实际项目案例展示了它们在开发中的应用和测试结果，同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
热爱技术的小郑
61 4
Vue学习之--------路由的query、params参数、路由命名（3）（2022/9/5）
刘大猫.
|
3月前
|
JavaScript
vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】
vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】
刘大猫.
28 0
范大脚脚
|
JavaScript Go
vue 路由demo
范大脚脚
1028 0
范大脚脚
|
JavaScript C语言 Go
vue 路由demo2
范大脚脚
1022 0

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    vue3使用pinia中的actions，需要调用接口的话
  • 9
    vue视图更新原理、nextTick()原理
  • 10
    Vue打包后Echarts图表不显示问题解决
  • 1
    使用Vue.js构建交互式前端的技术探索
    92
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    171
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    136
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    156
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    200
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    116
  • 7
    vue3中使用动态组件
    115
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    148
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    77
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    128

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月