精华内容
下载资源
问答
  • 2021-06-04 16:20:18
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./bower_components/vue/dist/vue.js"></script>
        <script src="./bower_components/vue-router/dist/vue-router.js"></script>
    </head>
    
    <body>
        <div id="app">
            <router-link to="/user/1">Boolean传参</router-link>
            <router-link to="/user1">对象传参</router-link>
            <router-link to="/user2/1">函数传参</router-link>
            <router-view></router-view>
        </div>
        <script>
            let routes = [
                {//Boolean传参
                    path: '/user/:id',
                    component: {
                        props: ['id'],
                        template: '<h1>id:{{id}}</h1>'
                    },
                    props: true //true把$route.params.id放到了组件的props里,false则相反。
                },
                {//对象传参
                    path: '/user1',
                    component: {
                        props: ['name'],
                        template: '<h1>{{name}}</h1>',
                    },
                    props: { name: 'Tom' }
                },
                {//函数传参
                    path: '/user2/:id',
                    component: {
                        props: ['id'],
                        template: '<h1>id:{{id}}</h1>'
                    },
                    props: router => {
                        return {
                            id: router.params.id
                        }
                    }
                }
            ];
            let router = new VueRouter({
                routes
            })
            new Vue({
                router,
                el: '#app'
            })
        </script>
    </body>
    
    </html>

     

    更多相关内容
  • 我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4。...

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4。
    编程式路由传参

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
    

    1. 通过 params 传递

    路由配置

    路径参数 用冒号 : 表示。

    const routes = [
      // 动态段以冒号开始
      { path: 'details/:id', name: "details", component: Details },
    ]
    

    router.push() 方法的参数可以是一个字符串路径,或者一个描述地址的对象。

    const Home = {
      template: '<div @click="toDetails">To Details</div>',
      metheds: {
        toDetails() {
          // 字符串路径
          this.$router.push('/details/001')
          // 带有路径的对象
          this.$router.push({path: '/details/001'})
          // 命名路由,路由配置时,需要 name 字段
          this.$router.push({ name: 'details', params: { id: '001' } })
        }
      }
    }
    

    注意,如果提供了 path,params 会被忽略:

    // `params` 不能与 `path` 一起使用
    router.push({ path: '/details', params: { id: '001' } }) // -> /details
    

    组件获取数据

    当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

    const Details = {
      template: '<div>Details {{ $route.params.id }} </div>',
      created() {
        // 监听路由变化
        this.$watch(
          () => this.$route.params,
          (toParams, previousParams) => {
            // 对路由变化做出响应...
          }
        )
      },
    }
    

    2. 通过 query 传递

    这种情况下 query (查询参数)传递的参数会显示在 url 后面,如:/details/001?kind=car。
    路由配置

    使用 query 时,以下三种方式都是可行的:

    this.$router.push('/details/001?kind=car')
    
    this.$router.push({ path: '/details/001', query: { kind: "car" }})
    
    this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})
    

    组件获取数据

    组件通过 $route.query 获取:

    const Details = {
      template: '<div>Details {{ $route.query.kind }} </div>',
      created() {
        // 监听路由变化
        this.$watch(
          () => this.$route.query,
          (toParams, previousParams) => {
            // 对路由变化做出响应...
          }
        )
      },
    }
    

    要对同一个组件中参数的变化做出响应的话,你可以简单地 watch $route 对象上的任意属性,在这个场景中,就是 $route.query 。
    3. 通过 hash 传递

    通过此方式,url 路径中带有 hash,例如:/details/001#car。
    路由配置

    使用 hash 时,以下三种方式都是可行的(同 query):

    this.$router.push('/details/001#car')
    
    this.$router.push({ path: '/details/001', hash: '#car'})
    
    this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})
    

    组件获取数据

    组件通过 $route.hash.slice(1) 获取:

    const Details = {
      template: '<div>Details {{ $route.hash.slice(1) }} </div>',
    }
    

    通过 props 进行传递

    在组件中使用 $route 会与路由紧密耦合,这限制了组件的灵活性,因为它只能用于特定的 URL。虽然这不一定是件坏事,但我们可以通过 props 配置来解除这种行为。
    

    以解耦的方式使用 props 进行参数传递,主要是在路由配置中进行操作。

    1. 布尔模式

    当 props 设置为 true 时,route.params 将被设置为组件的 props。
    例如下面的代码是通过 $route 的方式获取动态字段 id:

    const User = {
      template: '<div>User {{ $route.params.id }}</div>'
    }
    const routes = [{ path: '/user/:id', component: User }]
    

    将上面的代码替换成 props 的形式,如下:

    const User = {
      props: ['id'], // 组件中通过 props 获取 id
      template: '<div>User {{ id }}</div>'
    }
    // 路由配置中,增加 props 字段,并将值 设置为 true
    const routes = [{ path: '/user/:id', component: User, props: true }]
    

    注意:对于有命名视图的路由,你必须为每个命名视图定义 props 配置:

    const routes = [
      {
        path: '/user/:id',
        components: { default: User, sidebar: Sidebar },
        // 为 User 提供 props
        props: { default: true, sidebar: false }
      }
    ]
    

    2. 对象模式

    当 props 是一个对象时,它将原样设置为组件 props。当 props 是静态的时候很有用。
    路由配置

    const routes = [
      {
        path: '/hello',
        component: Hello,
        props: { name: 'World' }
      }
    ]
    

    组件中获取数据

    const Hello = {
      props: {
        name: {
          type: String,
          default: 'Vue'
        }
      },
      template: '<div> Hello {{ name }}</div>'
    }
    

    组件默认显示 Hello Vue,但路由配置了 props 对象,当路由跳转到 /hello 时,会显示传递过来的 name, 页面会显示为 Hello World。

    3. 函数模式

    可以创建一个返回 props 的函数。这允许你将参数转换为其他类型,将静态值与基于路由的值相结合等等。
    路由配置

    使用函数模式时,返回 props 的函数接受的参数为路由记录 route。
    // 创建一个返回 props 的函数

    const dynamicPropsFn = (route) => {
      return { name: route.query.say + "!" }
    }
    const routes = [
      {
        path: '/hello',
        component: Hello,
        props: dynamicPropsFn
      }
    ]
    

    组件获取数据

    当 URL 为 /hello?say=World 时, 将传递 {name: ‘World!’} 作为 props 传给 Hello 组件。

    const Hello = {
      props: {
        name: {
          type: String,
          default: 'Vue'
        }
      },
      template: '<div> Hello {{ name }}</div>'
    }
    

    此时页面将渲染:
    在这里插入图片描述

    注意:请尽可能保持 props 函数为无状态的,因为它只会在路由发生变化时起作用。如果你需要状态来定义 props,请使用包装组件,这样 vue 才可以对状态变化做出反应。
    其他方式

    1. 通过 Vuex 进行传递

    1. store 存储状态;
    2. A 组件更改 store 中的状态;
    3. B 组件从 store 中获取。
    

    2. 通过前端本地存储等方式

    1. Local Storage;
    2. Session Storage;
    3. IndexedDB;
    4. Web SQL;
    5. Cookies。
    
    展开全文
  • Vue路由组件传参

    2021-09-30 14:58:08
    1.传统的路由组件传参 在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。 const User = { template: '<div>User {{ $route.params.id }}<...

    目录

    1.传统的路由组件传参

    2.使用props将组件和路由解耦

    (1)布尔模式

    (2)对象模式

    (3)函数模式


    1.传统的路由组件传参

      在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

    const User = {
      template: '<div>User {{ $route.params.id }}</div>'
    }
    const router = new VueRouter({
      routes: [{ path: '/user/:id', component: User }]
    })

    2.使用props将组件和路由解耦

    (1)布尔模式

    可以传多个参

    //配置路由表
    const router = new VueRouter({
      routes: [{ path: '/about/:id/:age', component: About,props:true }]
    })
    
    //父路由传参
    <router-link :to="{name:'About',params:{id:11,age:18}}">About</router-link>
    
    //子路由接受参数
    <template>
      <div class="about">
    	  <h1>{{id}}</h1>
      </div>
    </template>
    <script>
    	export default{
    		name:'about',
    		props:['id','age']
    	}
    </script>

    (2)对象模式

    props是一个对象时,这将按原样设置为组件道具。当道具是静态的时候很有用。

    就是我们也能拿到对象中的数据,当props为对象时会被设置为组件的属性可以直接通过组件的props 进行获取。

    const router = new VueRouter({
      routes: [
        {
        path: '/about',
        name: 'About',
        component: () => import( '../views/About.vue'),
    	props:{ isChecked: false,age:18 }
        }
      ]
    })
    
    //子路由接收
    <template>
      <div class="about">
    	<h3>{{isChecked}}</h3>
    	<h4>{{age}}</h4>
      </div>
    </template>
    
    <script>
    	export default{
    		name:'about',
    		props:['isChecked','age']
    	}
    </script>

    结果:

    拿到了数据,成功。 

    (3)函数模式

    您可以创建一个返回 props 的函数。这允许您将参数转换为其他类型,将静态值与基于路由的值组合等。

    const router = new VueRouter({
      routes: [
        {
        path: '/about/:id',
        name: 'About',
        component: () => import('../views/About.vue'),
    	props: route => ({ query: route.params.id })  //也可以通过query传值
        }
      ]
    })
    
    //父路由传值
    <router-link :to="{name:'About',params:{id:11}}">About</router-link>
    
    //子路由接收
    
    <template>
      <div class="about"> 
    	<h5>{{query}}</h5>
      </div>
    </template>
    
    <script>
    	export default{
    		name:'about',
    		props:['query']
    	}
    </script>
    

    结果:

    成功接收!

     

    URL:about/11{query:11}作为道具传递给组件。

    尽量保持props函数无状态,因为它只在路由更改时进行评估。如果您需要状态来定义道具,请使用包装器组件,这样 vue 就可以对状态变化做出反应。

    展开全文
  • VueRouter路由组件传参

    2020-05-14 16:45:41
    通过params传递参数 // 命名路由 userId不会出现在url上 this.$router.push({ name: 'user', params: { userId: '123' }}) ...注意:name的值是在router路由里定义的name值,而不是组件中定义的name值 通过q

    通过params传递参数

    
     // 命名路由 userId不会出现在url上
     this.$router.push({ name: 'user', params: { userId: '123' }})
     
     // 获取传递的参数
     this.$route.params.userId
    
    1. 只能使用name,不能使用path,因为使用path后params会被忽略
    2. 参数不会显示在路径上
    3. 浏览器强制刷新参数会被清空

    注意:name的值是在router路由里定义的name值,而不是组件中定义的name值

    通过query传递参数

    
     // 带查询参数,变成 /register?plan=private
     this.$router.push({name:'register',query:{ plan: 'private' }})
    
     // 带查询参数,变成 /register?plan=private
     this.$router.push({ path: '/register', query: { plan: 'private' }})
     
     // 获取参数
     this.$route.query.age
     this.$route.query.sex
    
    1. 可以使用name,也可以使用path
    2. 参数会显示在路径上
    3. 浏览器强制刷新参数不会丢失

    动态路由匹配

    动态路径参数 以 : 冒号开头,如 { path: ‘/user/:id’, component: xxx },使用动态路径参数可以达到动态路由匹配的效果
    通过 /:id 的这种动态路由匹配时,当匹配到一个路由时,参数值通过 this.$route.params.id 获取到
    当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
    复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象:

      watch: {
        '$route' (to, from) {
          // 对路由变化作出响应...
        }
      }
    

    或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫:

     beforeRouteUpdate (to, from, next) {
        // react to route changes...
        // don't forget to call next() 不要忘记调用next
      }
    
    

    动态路径参数的跳转方法

    如:{ path: ‘/user/:userId’, component: xxx }

    1:命名路由跳转

     this.$router.push({name: 'user',params: { userId: 123, sex:'man' }})  //匹配为/user/123
    

    注意: params中userId必须和上面路径中的 userId(/user/:userId)名一直,userId位置随意,还可以传递其他参数

    2:带查询参数跳转

      this.$router.push({path: '/user/123',query: { sex: 'man' }}) //匹配为 /user/123?sex=max
    

    注意: path路径格式和路由里定义的一样,:userId匹配123,同时路径上会添加sex=man属性

    vue-router路由两种模式

    hash模式

    路径上带#,原理是监听了window.onhashchange事件,单页面应用使用时路由变化不会重新请求服务器,页面刷新时,#后边的路径不会发送给服务器,所以服务端不需要配置404页面

    history模式

    路径上不带#,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,但刷新页面时,整个路径都会请求到服务端,所以需要服务端配置404页面

    展开全文
  • 我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4。...
  • vue 路由组件传参

    2020-05-16 23:09:31
    路由组件传参 我们通常把路由直接映射(绑定)的组件称为 路由组件,也只有路由组件才能直接调用路由有关对象:$router、$route 当我们一个组件即希望作为路由组件使用,又可能作为功能组件(某个页面中的一部分)去...
  • 组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。通过props将组件路由解耦,使得该组件更易于重用和测试
  • Vue-router路由组件传参

    2022-06-06 11:32:10
    正常情况下我们通用的传参方式主要是有一下两种方式: 除了上面的,其实还有另外三种方式:1.布尔模式、通过 props 解耦 2.对象模式、如果 是一个...如果你需要状态来定义 ,请使用包装组件,这样 Vue 才可以对状态
  • 1、父组件向子组件传参 父组件向子组件共享数据需要使用自定义属性 // 父组件 <template> <div> // 使用子组件 <son :msg="message" :userInfo="userInfo"></son> </div> <...
  • 文章目录vue-router路由组件传参案例默认处理对象模式的回调函数模式 路由组件传参 我们通常把路由直接映射(绑定)的组件称为 路由组件,也只有路由组件才能直接调用路由有关对象:$router、$route 当我们一个组件...
  • 路由组件传参 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=...
  • 1、boolean传参(只能接受params参数) { path: "/search/:keyword?", component: Search, name: "search", props: true, }, 2、对象传参 { path: "/search/:keyword?", component: Search, name: ...
  • Vue路由动态传参

    2021-07-05 21:20:38
    根据导航菜单实现点击跳转不同组件携带所需要使用的参数,因为Vue是单页面,所以跳转时时组件之间的跳转,这时就可以使用路由动态传参来解决这个问题,以下是路由动态传参的两种方式 一.Params(通过路由属性中的...
  • VUE路由组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name: 'particulars', component: particulars } this.$router.push...
  • Vue路由导航传参

    2022-05-25 16:17:14
    当项目中组件间通过路由跳转,有时,我们需要传递一个组件中的参数到另一个组件中使用,那么我们此时就不能够靠组件间直接传递数据,只能通过路由导航传参 路由传参有两种方式:query传参和params传参
  • Vue3.0路由传参

    2022-05-01 22:29:01
    传参。直接push query 或者 param也行 const router = useRouter(); const handleEdit = (index, row) => { router.push({path:"/publishArticle",query: {id:row.articleId}}); // editVisible.value = ...
  • vue路由组件传参-页面通信

    千次阅读 2018-02-24 15:52:01
    vue路由传参,是页面通信的重要组成部分,而掌握路由传参,必须要认识一个重要对象-$route。(切记,是$route,而不是$router) $route对象 这是一个专门用于记录vue组件参数的对象。 例如: //router.js { ...
  • vue路由传参的四种方式

    千次阅读 2021-09-09 11:00:32
    vue路由传参 一、router-link路由导航 父组件:使用<router-link to = "/跳转路径/传入的参数"></router-link> 子组件:this.$route.params.num接收父组件传递过来的参数 mounted () { this.num = ...
  • { path:'message', component:Message, ... //props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。 // props:{a:1,b:'hello'} //props
  • vue-router官网中关于路由组件传参的三种模式:布尔模式 对象模式 函数模式,光看官网的描述还是很难理解,自己动手写了一下,大致是这样的。 先自定义一个组件,如下: <template> <div> <div&...
  • Vue路由组件通过props配置传参(图文+代码)
  • Router传参方式: 1.query传参 <router-link :to={ path:"...", //跳转地址 query:{ id:".." ...编程式路由 this.#router.push({ path:"...", query:{ id:"..." } }) 2.params传参 p
  • 路由组件传参数
  • 路由跳转代码 this.$router.push('/details/001’) // 带有路径的对象 this.$router.push({path: '/details/001'}) // 命名路由路由配置时,需要 name 字段 this.$router.push({ name: 'details', params: {...
  • 路由传参 1. 通过路由属性中的name来确定匹配的路由,通过params来传递参数 父组件 this.$router.push传递参数 //html <button @click="toChild"> </button> //方法 toChild(){ this.$router.push...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,501
精华内容 4,600
关键字:

vue路由组件传参