Vue2 第二十节 vue-router（二）

最新推荐文章于 2024-09-21 11:29:05 发布
最新推荐文章于 2024-09-21 11:29:05 发布
阅读量121 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjieyujiayou/article/details/132110757
版权

1.路由的query参数

2.命名路由

3.路由的params参数

4.路由的props配置

一.路由的query参数

① 跳转路由并携带参数

② 第一种写法：字符串写法

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

③ 第二种写法：对象写法

        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >

④ 取数据

 <ul>
    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息详情：{{ $route.query.title }}</li>
  </ul>

⑤ 所有代码（这里只把相关的代码贴出来）

Message.vue

<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> -->
        <!-- to的对象写法 -->
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  }
}
</script>

<style>
</style>

Detail.vue

<template>
  <ul>
    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息详情：{{ $route.query.title }}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail'
}
</script>

index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          // 不要加/
          path: 'news',
          component: News
        },
        {
          // 不要加/
          path: 'message',
          component: Message,
          children: [
            {
              path: 'detail',
              component: Detail
            }
          ]
        }
      ]
    }
  ]
})

二.命名路由

①  给路由命名

② 简化路径，直接使用名字就可以了 

③ 相关代码

Message.vue

<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
        >&nbsp;&nbsp; -->
        <!-- to的对象写法 -->
        <router-link
          :to="{
            name: 'xiangqing',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >&nbsp;&nbsp;
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {

  name: 'Message',
  data () {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  }
}
</script>

<style>
</style>

index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
export default new VueRouter({
  routes: [
    {
      name: 'guanyu',
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          // 不要加/
          path: 'news',
          component: News
        },
        {
          // 不要加/
          path: 'message',
          component: Message,
          children: [
            {
              name: 'xiangqing',
              path: 'detail',
              component: Detail
            }
          ]
        }
      ]
    }
  ]
})

三.路由的params参数

① 携带参数

② 写法一：字符串写法

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

使用这种方法必须在路由规则中写占位符

② 写法二：对象写法

params不允许使用path，只能使用name

 <router-link
          :to="{
            name: 'xiangqing',
            // 不允许写path，必须使用name
            // path: '/home/message/detail',
            params: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >

④ 取数据

<template>
  <ul>
    <li>消息编号： {{ $route.params.id }}</li>
    <li>消息标题: {{ $route.params.title }}</li>
  </ul>
</template>

⑤ 相关代码

index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
export default new VueRouter({
  routes: [
    {
      name: 'guanyu',
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          // 不要加/
          path: 'news',
          component: News
        },
        {
          // 不要加/
          path: 'message',
          component: Message,
          children: [
            {
              name: 'xiangqing',
              path: 'detail/:id/:title', // 使用占位符声明并接收
              component: Detail
            }
          ]
        }
      ]
    }
  ]
})

Message.vue

<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
        >&nbsp;&nbsp; -->
        <!-- to的对象写法 -->
        <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{
          m.title
        }}</router-link
        >&nbsp;&nbsp;
        <!-- params的写法 -->

        <router-link
          :to="{
            name: 'xiangqing',
            // 不允许写path，必须使用name
            // path: '/home/message/detail',
            params: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >&nbsp;&nbsp;
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {

  name: 'Message',
  data () {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  }
}
</script>

<style>
</style>

Detail.vue

<template>
  <ul>
    <li>消息编号： {{ $route.params.id }}</li>
    <li>消息标题: {{ $route.params.title }}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail'
}
</script>

<style>
</style>

四.路由的props配置

（1） 第一种写法：对象写法

 ① 以props形式传过去

② 以props形式接收

（2）第二种写法： 值为bool值，如果bool值为真，就会把该路由组件收到的所有params参数，

  以props的形式传给Detail，只能解决params参数，处理不了query参数

 （3）第三种写法：值为函数，会自动传过来$route的参数

（4） 使用

 

pa_miao_chi
关注
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue路由跳转前的校验（路由守卫）
weixin_46266624的博客
04-15 817
浏览器通过Winodw.sessionStorage和Window.localStorage属性来实现本地存储机制。对路由进行权限控制,一般去取存在浏览器上的某个值。【配合WebStorage】1.对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。2.hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。全局守卫、独享守卫、组件守卫。
Vue（九）——页面路由（1）
路过Coder
11-17 1004
理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。理解：value 是 component，用于展示页面内容工作过程：当浏览器的路径改变时，对应的组件就会显示生活中的路由和路由器是为了完成多台设备的上网，而编码中的路由和路由器是完为了完成实现SPA应用的导航区与展示区的切换。对SPA应用的理解单页 Web 应用（single page web application，SPA）
Vue中的路由
qq_56127002的博客
04-25 708
详细介绍了路由守卫
Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）
热门推荐
weixin_51351637的博客
09-22 1万+
作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫。
Vue-Router2.X多种路由实现方式总结
01-21
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router 一、使用路由 在main.js中，需要明确安装路由功能： import ...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue 中如何实现鼠标拖动出发滚动条的跟随移动？
sinat_33255495的博客
09-20 388
如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。在做弹窗、表单或 tab 切换需求的时候，有时候因为内容过长会导致出现滚动条，但是只能拖动滚动条时会导致操作不便，我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。为方便复用，我们可以创建一个类来封装鼠标事件，使用时把事件挂载到指定容器即可。这样就实现啦，就是如此简单！
小明，谈谈你对Vue nextTick的理解
wujiayu31415的博客
09-19 348
是一个重要的异步操作工具，用于在 DOM 更新完成后执行回调函数。，Vue 提供了一种高效的方式来处理异步更新，帮助开发者在数据变更后正确执行逻辑。在使用一些依赖于 DOM 状态的第三方库时，确保它们在 Vue 更新后执行，可以避免潜在的错误。这种实现机制确保了 Vue 的响应式特性可以平滑运行，并保证了数据与视图之间的高度一致性。：在 Vue 的响应式系统中，当数据发生变化时，相关的组件会被标记为需要更新。的回调会在 DOM 更新完成后被执行，从而确保了在 DOM 变化之后获取最新的状态。
文件系统设计 - 开发文件系统 Store (上篇)
最新发布
qq_44746132的博客
09-21 300
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
2024 vue3入门教程：02 我的第一个vue页面
m0_47484034的博客
09-19 215
2024 vue3入门教程：02 我的第一个vue页面
Vue+nodejs+express汽车配件商城销售管理系统 i9cgz
qq2295116502的博客
09-18 1333
Express 框架于Node运行环境的轻量级Web框架,封装了Node的http模块并对该模块的功能进行了扩展使开发者可以轻松完成页面路由、请求处理、响应处理。核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。
基于python+django+vue的美术馆预约系统
计算机学姐的博客
09-18 1298
【2025最新】基于协同过滤+python+django+vue+MySQL的美术馆预约系统，前后端分离。
基于Vue 3组合函数的分页、搜索与排序实践 —— nbsaas-boot项目的实际应用
nbsaas-boot基于Request-Response的企业级快速开发框架
09-17 1921
Vue 3的组合函数是用于封装功能逻辑的一种模式。与Vue 2的选项式API不同，组合函数允许开发者将组件逻辑集中封装在独立的函数中，便于在不同的组件间共享。在大型项目中，像这样的电商系统，组件往往需要实现复杂的数据交互逻辑，例如分页、搜索、排序等功能。如果将这些功能重复写在多个组件中，代码将会变得臃肿且难以维护。组合函数可以有效解决这一问题。
vue 案例使用
buhuidage的博客
09-17 371
加上show-password就行。el-switch 按键的使用。
如何使用ssm实现基于ssm框架的车辆出租管理系统+vue
寒夜
09-19 1119
【代码】ssm基于ssm框架的车辆出租管理系统+vue
【Vue】- 路由及传参
不靠谱先森的博客
09-18 1242
什么是单页面应用程序?● 所有功能在一个html页面上实现单页面应用优缺点?● 优点：按需更新性能高，开发效率高，用户体验好● 缺点：学习成本，首屏加载慢，不利于SEO应用场景?● 系统类网站 / 内部网站 / 文档类网站 /移动端站点什么是路由？○ 路由是一种映射关系Vue中的路由是什么?○ 路径和组件 的映射关系○ 根据路由就能知道不同路径的，应该匹配渲染哪个组件如何实现路径改变，对应组件切换,应该使用哪个插件?○ Vue 官方插件 VueRouter。
Vue技术栈深究：手写vue-router源码解析
"Vue技术栈探究vue-router源码与手写vue-router的教程，涵盖了Vue源码分析、源码重写、前端路由原理、设计模式学习、编程思想提升等内容，旨在帮助开发者深入理解Vue和vue-router，提升项目实战和面试准备能力。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值