Vue 路由传参

路由传参的方式（三种）

1. params 传参

• A

父路由发送

    <router-link to="/About/5/6">About</router-link>
    <!--占位router.js中写占位符和key-->

    path:"/About/:aaa:bbb"

子路由接

    <h4>我是App.vue路由传参params：{{ $route.params.aaa }}{{ $route.params.bbb }}</h4>

注：地址栏显示 http://localhost:8080/#/About/5/6 (opens new window) to不加冒号 ：

• B

设置路由中的name

  {
    path: "/user",
    name: "user",
    component: User
  },

父路由发送

    <router-link :to="{ name: 'xiaoming', params: { id: 123 } }" >About</router-link>
    <!-- 用params必须用name不能用path -->

注：123换成data中的key，可以动态传递参数

子路由接

        <h4>我是App.vue路由传参params：{{ $route.params.id }}</h4>

注：地址栏中不显示， http://localhost:8080/#/About 只有路由名，或别名（安全） to要加冒号：

*

    //params 有两种方式，
    to="/About/参数1/参数2"
    //通过上面的写法，路由配置中要用占位符
    :to="{name:'About',params:{参数1，参数2}}"
    //第一种参数暴露在地址栏中，第二中，不暴露参数更安全
    //必须用name不用path

1. query传参

A路由发

        <router-link :to="{ path: '/Home', query: { ju: 'zhang',gg：'guang' } }">Home</router-link>

B路由接

        <h4>我是App.vue路由传参query：{{ $route.query.ju }}{{ $route.query.gg }}</h4>

注：地址栏http://localhost:8080/#/Home?ju=zhang&gu=guang参数显示到地址栏中，参数键值对用&分开

        :to="{name:'About',query:{参数1，参数2}}"
        //拼接在url？后面，多个参数用&符连接

3. 使用 router-view 组件上，动态绑定数据

父路由传

        <router-view :mny="mny"></router-view>

子路由接

         props: {
            mny: { type: [Array, Number] }
        },

子路由用

        <h5>我是App用props传递的数据{{ mny }}</h5>

注

v-model 只在input表单中