Vue Router query 命名路由 params props

最新推荐文章于 2024-05-08 13:15:46 发布
最新推荐文章于 2024-05-08 13:15:46 发布
阅读量215 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44230693/article/details/131422429
版权

6.5.路由的 query 参数

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

<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link
  :to="{ 
    path:'/home/message/detail', 
    query:{ id: m.id, title: m.title } 
  }" >
  跳转
</router-link>
  2. 接收参数
    $route.query.id 
$route.query.title

在这里插入图片描述


src/router.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
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/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> -->

                <!-- 跳转路由并携带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: "Message",
        data() {
            return {
                messageList:[
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'}
                ]
            }
        }
    }
</script>

src/pages/Detail.vue

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

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

6.6.命名路由

命名路由

  1. 作用：可以简化路由的跳转
  2. 如何使用
    1. 给路由命名
      { 
  path:'/demo', 
  component:Demo, 
  children:[
    { 
      path:'test', 
      component:Test, 
      children:[ 
        { 
          name:'hello' // 给路由命名 
          path:'welcome', 
          component:Hello, 
        } 
      ] 
    }
  ]
}
    2. 简化跳转
      <!--简化前，需要写完整的路径 --> 
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 --> 
<router-link :to="{name:'hello'}">跳转</router-link>

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

src/router/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: [
                        {
                            name:'detail', // name配置项为路由命名
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/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> -->

                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link
                        :to="{
                        //path:'/home/message/detail',
                        name: 'detail', // 使用name进行跳转
                        query:{ id:m.id, title:m.title }
                    }">
                    {{m.title}}
                </router-link>
            </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>

6.7.路由的 params 参数

  1. 配置路由，声明接收params参数
    { 
  path:'/home', 
  component:Home,
  children:[
    { 
      path:'news', 
      component:News 
    },
    { 
      component:Message, 
      children:[ 
        { 
          name:'xiangqing', 
          path:'detail/:id/:title', // 🔴使用占位符声明接收params参数 
          component:Detail 
        } 
      ]
    }
  ]
}
  2. 传递参数，特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
    <!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
  :to="{ 
    name:'xiangqing', 
    params:{ id:666, title:'你好' } 
  }" >
  跳转
</router-link>
  3. 接收参数
    $route.params.id 
$route.params.title

src/router/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: [
                        {
                            name:'detail', // name配置项为路由命名
                            path:'detail/:id/:title', // 使用占位符声明接收params参数
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/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:'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>

src/pages/Detail.vue

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

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

6.8.路由的 props 配置

props作用：让路由组件更方便的收到参数

{ 
  name:'xiangqing',
  path:'detail/:id', 
  component:Detail,
  
  //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 
  // props:{a:900} 
  
  //第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件 
  // props:true
  
  //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件 
  props($route){ 
    return { 
      id: $route.query.id, 
      title: $route.query.title 
    } 
  }
}

src/router/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: [
                        {
                            name:'detail', // name配置项为路由命名
                            path:'detail/:id/:title', // 使用占位符声明接收params参数
                            component:Detail,

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

                            // 第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件
                            // props:true

                            // props的第三种写法，值为函数
                            props($route){ // 这里可以使用解构赋值
                                return {
                                    id: $route.params.id,
                                    title: $route.params.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/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:'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>

src/pages/Detail.vue

<template>
    <ul>
        <li>消息编号：{{ id }}</li>
        <li>消息标题：{{ title }}</li>
    </ul>
</template>

<script>
    export default {
        name: "Detail",
        props:['id','title']
    }
</script>
怀梦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
讲解vue-router之命名路由和命名视图
12-01
前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。 1.首先来说说什么是命名路由？ ① 官方文档的解释：https://router.vuejs.org/zh/guide/essentials/named-routes.html 就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果： <router-link :to="{ name: 'user',
详解vue-router 命名路由和命名视图
08-27
主要介绍了详解vue-router 命名路由和命名视图,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
@query传参_Vuerouter路由跳转的两种方式与路由传参的方法
weixin_39758392的博客
11-25 1051
路由的两种跳转方式路由跳转有两种方式：声明式和编程式。我们之前用的创建 a 标签来定义导航链接属于声明式。我们还可以借助 router 的如下这些实例方法创建编程式导航:router.pushrouter.push(...)它就等同于router.push(...)这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。该方法的参数可以是一个字...
Vue路由的使用——定义、传参
IT__learning的博客
03-11 811
路由，其实就是指向的意思。例如当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容——这就要在js 文件中配置路由。 在Web开发中，路由是指根据URL分配到对应的处理程序。对于大多数单页面应用，都推荐使用官方支持的vue-router。Vue-router通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。 路由的
【Vue-Router】不跳转的情况下为路由(当前页面)添加query参数
m0_46470372的博客
04-04 2270
【代码】【Vue-Router】不跳转的情况下为路由(当前页面)添加query参数。
vue 路由的query参数
MCCLS的博客
07-30 1288
要点： 而且这种传参是不会打扰到路由配置的 然后我们这边再对之前的案例增加 进行一个三级路由的嵌套 但是千万不要觉得这个三级路由是点击了消息001就跟前面一样是对不同组件的呈现,这样数据一多太麻烦了 所以我们这边可以通过组件传参的方式,写出来,只需要一个组件,然后通过点击后发送不同的参数给组件实现展示的信息不同 然后先进行三级路由的规则编写 然后在要跳转路径的页面上写入router-link 并在要展示的位置写入router-view标签 就是里面的内容还是...
vue-router（params，props，query）
qq_60976312的博客
12-23 969
vue-router（params，props，query） 路由的query参数 路由params参数 路由的props配置 router-link的replace属性 编程式路由导航 缓存路由组件 两个新的生命周期钩子
六、【Vue-Router】路由的props配置
天行健，君子以自强不息
08-07 2883
路由的props配置
Vue2.0 路由传参 query params props
qq_42389674的博客
06-29 398
vue 路由传参
Vue学习第28天——路由传参（query参数和params参数）详解及案例
背心的博客
09-22 3417
路由传参（query参数和params参数）详解及案例
vue-router 使用详解
mjzhang1993的博客
10-20 2123
Vue-router 使用整理1. 说明 重要文件版本“vue”: “^2.4.2”, “vue-router”: “^2.7.0”, 官网地址 2. 项目引入1. 下载 npm install --save vue-router2. 导入到项目中并使用 import Vue from 'vue'; import Router from 'vue-router'; V
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 342
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 372
注释很详细，直接上代码……
Vue单页面应用和多页面应用的区别
liu62615的博客
05-04 255
概念： SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。 MPA多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。
自定义表单元素组件内容变化触发ElForm重新校验
东逝水
05-02 525
写一个FeeTypeSelector的组件，它的属性大概是这样的// 可选项的数据.......通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中，也能正常的校验。不过我今天发现，Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失，而不需要点击提交按钮调用form.validate方法，而上面的自定义组件就不能。
el-checkbox 无法动态设置勾选状态
weixin_52268321的博客
05-07 228
cheked 值动态变化，但是el-checkbox勾选状态无法动态改变
vue根据文字动态判断溢出...鼠标悬停显示el-tooltip展示
weixin_46092900的博客
05-08 272
定义Tooltip是一种小型弹出框，它显示有关特定页面元素的信息，例如按钮、链接或图标。Tooltip通常以半透明的气泡形式呈现，并出现在页面元素的旁边或下方。它可以改善用户体验，使用户更容易理解页面元素的功能和意图。用户可以通过将鼠标悬停在页面元素上来快速了解有关该元素的信息，而无需离开当前页面或浏览其他页面。
props怎么接收 vuerouter的query参数
07-20
在Vue组件中，你可以使用`props`属性来接收Vue Router的查询参数（query参数）。通过将`props`设置为`true`，你可以将查询参数作为组件的属性进行接收。 以下是一个示例： ```javascript export default { props:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值