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

114.【Vue-细刷-05】（五）

2023-09-24 58
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 114.【Vue-细刷-05】

6.给路由传递query参数 (使用query)

(1).传递参数、参数获取

messages.vue

<!-- 路由切换时，携带query参数 -->
        <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp;
<template>
  <div>
    <ul>
      <li v-for="item in message" :key="item.id">
        <!-- 路由切换时: 携带params参数 -->
        <!-- <router-link :to="`/home/message/detail/${item.id}/${item.title}/${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp; -->
        <!-- 路由切换时，携带query参数 -->
        <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp;
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      message: [
        { id: "001", title: "消息1", content: "你好,文本1" },
        { id: "002", title: "消息2", content: "你好,文本2" },
        { id: "003", title: "消息3", content: "你好,文本3" },
      ],
    };
  },
};
</script>
<style>
</style>

index.js

path:'detail',  // query参数无需声明即可接受
• 1
// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
// TODO: 引入我们的三级
import Details from '../pages/Detail.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            // path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数
                            path:'detail',  // query参数无需声明即可接受
                            component: Details
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router
• 1

Detail.vue

这里我们需要使用到 query
    <ul>
      <li>ID: {{ $route.query.id }}</li>
      <li>Title: {{ $route.query.title }}</li>
      <li>CONTENT: {{ $route.query.content }}</li>
    </ul>

<template>
  <div>
    <ul>
      <li>ID: {{ $route.query.id }}</li>
      <li>Title: {{ $route.query.title }}</li>
      <li>CONTENT: {{ $route.query.content }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Detail",
  mounted() {
    console.log(this);
  },
};
</script>
<style>
</style>

(2).一个路由用两种方式传参

id用params传参，其余的用query

path: 'detail/:id'    // 只输入id即可
其余的按部就班....

7.命名路由简化跳转、传参

(1).命名路由

index.js

我们通过命名，可以在传参的时候可以用名字来代替较为麻烦的路径
                    children:[
                        {
                            // path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数
                            path:'detail',  // query参数无需声明即可接受
                            component: Details,
                            name:'xiangqing'   // 命名
                        }
                    ]

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
// TODO: 引入我们的三级
import Details from '../pages/Detail.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            // path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数
                            path:'detail',  // query参数无需声明即可接受
                            component: Details,
                            name:'xiangqing'
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router

Details.vue

是对象的形式。
     <router-link
          :to="{ name: 'xiangqing',
            params: {},  // params和query的顺序不是固定的，假如为空，可以省略
            query: { id: item.id, title: item.title, content: item.content },
          }"
          >{{ item.title }}</router-link
        >

<template>
  <div>
    <ul>
      <li v-for="item in message" :key="item.id">
        <!-- 路由切换时: 携带params参数 -->
        <!-- <router-link :to="`/home/message/detail/${item.id}/${item.title}/${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp; -->
        <!-- 路由切换时，携带query参数 -->
        <!-- <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp; -->
        <!-- 命名路由跳转、传参 -->
        <router-link
          :to="{
            name: 'xiangqing',
            params: {},  // params和query的顺序不是固定的，假如为空，可以省略
            query: { id: item.id, title: item.title, content: item.content },
          }"
          >{{ item.title }}</router-link
        >
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      message: [
        { id: "001", title: "消息1", content: "你好,文本1" },
        { id: "002", title: "消息2", content: "你好,文本2" },
        { id: "003", title: "消息3", content: "你好,文本3" },
      ],
    };
  },
};
</script>
<style>
</style>

8.路由的props配置 (插值语法)

我们通过插值语法获取信息太过繁琐。用Computed手动计算太过于冗余。所以Vue使用props接受比较简介

(1).props映射自定义的静态数据给当前的路由

index.js

props:{carName:'马自达-阿特兹'}  //通过props映射自定义的静态数据给当前的路由

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
// TODO: 引入我们的三级
import Details from '../pages/Detail.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            // path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数
                            path:'detail',  // query参数无需声明即可接受
                            component: Details,
                            name:'xiangqing',
                             props:{carName:'马自达-阿特兹'}  //通过props映射自定义的静态数据给当前的路由
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router

Details.vue

props:['carName'],  // 接受传递过来的而参数
<template>
  <div>
    <ul>
      <!-- <li>ID: {{ $route.query.id }}</li>
      <li>Title: {{ $route.query.title }}</li>
      <li>CONTENT: {{ $route.query.content }}</li> -->
      <li>carName:{{carName}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Detail",
  props:['carName'],  // 接受传递过来的而参数
  mounted() {
    console.log(this);
  },
};
</script>
<style>
</style>

(2).映射params参数为props传给路由组件 (只兼容params)⭐

index.js

props:true  //只能映射params参数为props传给路由组件

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
// TODO: 引入我们的三级
import Details from '../pages/Detail.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数
                            // path:'detail',  // query参数无需声明即可接受
                            component: Details,
                            name:'xiangqing',
                            // props:{carName:'马自达-阿特兹'}  //通过props映射自定义的静态数据给当前的路由
                            props:true  //映射params参数为props传给路由组件
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router

Details.vue

<li>ID: {{ id }}</li>
      <li>Title: {{ title }}</li>
      <li>CONTENT: {{ content }}</li>
props:['id','title','content'],  // 接受传递过来的而参数

<template>
  <div>
    <ul>
      <li>ID: {{ id }}</li>
      <li>Title: {{ title }}</li>
      <li>CONTENT: {{ content }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Detail",
  props:['id','title','content'],  // 接受传递过来的而参数
  mounted() {
    console.log(this);
  },
};
</script>
<style>
</style>

只能是params。query的不行

(3).propos是一个函数 (兼容params和query)

index.js

props(){
   return {id: '001', title: '123', content: "4545"}
 }

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
// TODO: 引入我们的三级
import Details from '../pages/Detail.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数
                            // path:'detail',  // query参数无需声明即可接受
                            component: Details,
                            name:'xiangqing',
                            // props:{carName:'马自达-阿特兹'}  //通过props映射自定义的静态数据给当前的路由
                            // props:true  //映射params参数为props传给路由组件
                            props(){
                                return {id: '001', title: '123', content: "4545"}
                            }
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router

details.vue

<template>
  <div>
    <ul>
      <li>ID: {{ id }}</li>
      <li>Title: {{ title }}</li>
      <li>CONTENT: {{ content }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Detail",
  props:['id','title','content'],  // 接受传递过来的而参数
  mounted() {
    console.log(this);
  },
};
</script>
<style>
</style>

(4).props函数里面有一个参数 （常用⭐⭐⭐⭐）

index.js

props(route) {  //此处接受的router是vc的$store
    return route.params
}

details.vue

<template>
  <div>
    <ul>
      <li>ID: {{ id }}</li>
      <li>Title: {{ title }}</li>
      <li>CONTENT: {{ content }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Detail",
  props:['id','title','content'],  // 接受传递过来的而参数
  mounted() {
    console.log(this);
  },
};
</script>
<style>
</style>

9.编程式路由导航

(1).编程式路由的前进和倒退
  1. this.$router.push(path)； 相当于点击路由连接(可以返回当前路由界面)。
  2. this.%router.replace(path): 用新路由替换当前路由(不可以返回当前路由界面)
  3. this.$router.back()； 请求(返回)上一个记录路由
  4. this.$router.go(-1):请求(返回上一个记录路由)
  5. this.$router.go(1):请求下一个路由

Message.vue

css属性的 replace也是不留痕迹的

<template>
  <div>
    <ul>
      <li v-for="item in message" :key="item.id">
        <!-- 路由切换时: 携带params参数 -->
        <!-- <router-link :to="`/home/message/detail/${item.id}/${item.title}/${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp; -->
        <!-- 路由切换时，携带query参数 -->
        <!-- <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp; -->
        <!-- 命名路由跳转、传参 -->
        <router-link
          :to="{
            name: 'xiangqing',
            params: { id: item.id, title: item.title, content: item.content }, // params和query的顺序不是固定的，假如为空，可以省略
            query: {},
          }"
          >{{ item.title }}</router-link
        >
        <button @click="pushShow(item)">push</button>
        <button @click="replaceShow(item)">replace</button>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      message: [
        { id: "001", title: "消息1", content: "你好,文本1" },
        { id: "002", title: "消息2", content: "你好,文本2" },
        { id: "003", title: "消息3", content: "你好,文本3" },
      ],
    };
  },
  methods: {
    pushShow(item) {
      this.$router.push({
        name: "xiangqing",
        params: { id: item.id, title: item.title, content: item.content }, // params和query的顺序不是固定的，假如为空，可以省略
        query: {},
      });
    },
    replaceShow(item) {
        this.$router.replace({
        name: "xiangqing",
        params: { id: item.id, title: item.title, content: item.content }, // params和query的顺序不是固定的，假如为空，可以省略
        query: {},
      })
    },
  },
};
</script>
<style>
</style>

文章标签：
JavaScript
吉士先生
目录
相关文章
小宋1021
|
3天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
34 1
阿里巴巴叫我来巡山
|
14天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
108 17
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
44 1
vue学习第一章
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
32 1
雨溪-yuxi
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
39 1
vue学习第四章
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
30 1
vue学习第7章(循环）
雨溪-yuxi
|
2月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
33 1
vue学习第九章(v-model)
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
雨溪-yuxi
47 1
vue学习第十章(组件开发）
雨溪-yuxi
|
2月前
|
JavaScript 前端开发
vue学习第十一章（组件开发2）
欢迎来到我的博客，我是瑞雨溪，一名自学前端两年半的大一学生，专注于JavaScript与Vue。本文介绍Vue中的插槽（slot）使用方法，包括基本插槽、具名插槽及作用域插槽，帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助，请关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
24 1
vue学习第十一章（组件开发2）
雨溪-yuxi
|
2月前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期）
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期，从初始化到销毁各阶段的关键钩子函数及其应用场景，帮助你更好地理解Vue的工作原理。如果你觉得有帮助，欢迎关注我，将持续分享更多优质内容！🎉🎉🎉
雨溪-yuxi
33 1
vue学习第十二章(生命周期）

热门文章

最新文章

  • 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
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    新建Vue项目
  • 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完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

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