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

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

2023-09-24 105
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
吉士先生
目录
相关文章
34789737
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
330 2
哇塞女孩
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
310 137
谢妹纸
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
819 0
小宋1021
|
8月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
1053 4
我们是幸福一家人
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
361 82
34789737
|
7月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
895 77
rvblio6ca4cug
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
441 1
游客tsrksm3mlhq4y
|
8月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
游客tsrksm3mlhq4y
322 57
34789737
|
5月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
278 0
34789737
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
487 17