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

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

2023-09-24 29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
关键词：
vue VUE.js
吉士先生
目录
相关文章
东方睿赢
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略：1) 精简代码和组件拆分以减少冗余；2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由；3) 数据懒加载和防抖节流处理高频事件；4) 图片压缩和选择合适格式，使用CDN加速资源加载；5) 利用浏览器缓存和组件缓存提高效率；6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法，可提升用户在复杂应用中的体验。
东方睿赢
10 0
老板这功能得加钱
|
3天前
|
JavaScript 前端开发
vue(1)，小白看完都会了
vue(1)，小白看完都会了
老板这功能得加钱
11 0
咕噜咕噜wy
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
咕噜咕噜wy
11 0
向画
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
向画
8 0
阿珊和她的猫
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
阿珊和她的猫
11 1
yqcoder
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列：.env 环境变量
Vue 入门系列：.env 环境变量
yqcoder
9 1
谢妹纸
|
3天前
|
JavaScript
vue知识点
vue知识点
谢妹纸
11 0
咕噜咕噜wy
|
3天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
咕噜咕噜wy
13 0
Vue使用地图以及实现轨迹回放 附完整代码
老板这功能得加钱
|
3天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
老板这功能得加钱
7 0
向画
|
3天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
向画
6 0