zoukankan      html  css  js  c++  java
  • vue路由的四种传值

    第一种:props

    配置:

      组件内定义:

    props: ['id']

      路由映射配置,开启props:true :

           {
                path: '/user/:id',
                component: User,
                props: true
            }   

    跳转传参:

      1、标签跳转

    <router-link to="/user/1">第一个</router-link>

      2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/describe/${id}`,
            })

    获取参数:

    <div>第一种传值props: {{ id }}</div>

    第二种:

    配置:(url显示在问号之前)

      路由映射配置:

    {
        path: '/user/:id',
        component: User
    },

    跳转传参:

      1、标签跳转

    <router-link to="/user/1">第二个</router-link>

      2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/user/${id}`,
            })

    获取参数:

    <div>第二种传值$route.params.id: {{$route.params.id}}</div>

    第三种:(url不显示参数)

    配置:

      路由映射配置:

    {
        path: '/user',
        component: User
    },  

    跳转传参:

     1、标签跳转

    <router-link :to="{name:'c', params:{id:1}}">第四个</router-link>

     2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/user`,
          params:{
            id:id
          }
            })

    获取参数:

    <div>第三种传值$route.params.id: {{$route.params.id}}</div>

    第四种:(url显示在?之后)

    配置:

      路由映射配置:

    {
        path: '/user',
        component: User
    },  

    跳转传参:

     1、标签跳转

    <router-link :to="{name:'c', query:{id:1}}">第四个</router-link>

     2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/user`,
          query:{
            id:id
          }
            })

    获取参数:

    <div>第四种传值$route.query.id: {{$route.query.id}}</div>
  • 相关阅读:
    Hibernatede 一对多映射配置
    Hibrenate之事务的理解以及代码编写
    The servlet name already exists.解决方法
    hibernate入门程序
    什么是orm思想?
    Java的MVC模式简介
    JAVA框架之Hibernate框架的学习步骤
    java常见命名规则
    解决get方法提交参数中文乱码问题:
    谈谈对Spring IOC(控制反转)的理解--转
  • 原文地址:https://www.cnblogs.com/likewpp/p/10827320.html
Copyright © 2011-2022 走看看