Vue 路由组件参数设置与获取 query参数与params参数

Vue 路由参数的设置与获取

一、query参数

设置routes

import VueRouter from 'vue-router'
import Polaris from '../pages/Polaris'
import PolarisMessage from '../pages/PolarisMessage'
import PolarisPhone from '../pages/PolarisPhone'
import Detail from '../pages/Detail'

export default new VueRouter({
    routes: [
        {
            component: Polaris,
            path: "/Polaris",
            children: [
                {
                    path: 'PolarisMessage',
                    component: PolarisMessage
                },
                {
                    path: 'PolarisPhone',
                    component: PolarisPhone,
                    children: [
                        {
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        },
    ]
})

传参

PolarisPhone.vue

<template>
  <div>
    <h1>phone by Polaris</h1>
    <!-- 1 query参数  字符串写法 -->
    <!-- <router-link v-for="item in detailList" :to="`/Polaris/PolarisPhone/Detail?msg=${item.msg}`" :key="item.id">{{item.title}}</router-link> 
    -->

    <!-- 1 query参数  对象写法 -->
    <router-link
      v-for="item in detailList"
      :to="{
        path: '/Polaris/PolarisPhone/detail',
        query: {
          msg: item.msg,
        },
      }"
      :key="item.id"
      >{{ item.title }}</router-link
    >
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    detailList: [
      { id: 1, title: "查看详情1", msg: "我是详情1" },
      { id: 2, title: "查看详情2", msg: "我是详情2" },
      { id: 3, title: "查看详情3", msg: "我是详情3" },
    ],
  }),
};
</script>

获取参数
Detail.vue

<template>
  <li >
      <span>{{$route.query.msg}}</span>
  </li>
</template>

<script>
export default {};
</script>

二、params参数

• props为对象
• props为布尔值
• props为函数

props为对象

routes中写死数据，路由组件中声明props接收

router/index.js

import VueRouter from 'vue-router'
import Island from '../pages/Island'


export default new VueRouter({
    routes: [
        {
            component: Island,
            path: "/Island",
            props:{id:666}
        }
    ]
})

Island.vue
声明props接收

<template>
  <div>
    <h1>{{id}}</h1>
  </div>
</template>

<script>
export default {
  props:['id']
};
</script>

props为布尔值

routes中声明props为true已经path占位符，路由中间中声明props接收

router/index.js

import VueRouter from 'vue-router'
import Island from '../pages/Island'


export default new VueRouter({
    routes: [
        {
            component: Island,
            path: "/Island/:id",
            props:true
        }
    ]
})

App.vue

<template>
  <div id="app">
    <div class="nav">
      <router-link class="nav" :to="`/Island/${id}`" active-class="active-nav">
        Island
      </router-link>
    </div>
    <div class="con">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data:()=>({id:123})
};
</script>

Island.vue
声明props接收

<template>
  <div>
    <h1>{{id}}</h1>
  </div>
</template>

<script>
export default {
  props:['id']
};
</script>

props为函数

routes中声明props为一个函数，Vue给这个函数注入$routes形参，从而得到路由参数
可以拿到params和query参数

router/index.js

import VueRouter from 'vue-router'
import Island from '../pages/Island'

export default new VueRouter({
    routes: [
        {
            component: Island,
            path: "/Island",
            props: ($routes) => ({
                id: $routes.query.id,
                title: $routes.query.title
            })
        }
    ]
})

App.vue

<template>
  <div id="app">
    <div class="nav">
      <router-link class="nav" :to="`/Island?id=${id}&title=${title}`" active-class="active-nav">
        Island
      </router-link>
    </div>
    <div class="con">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data:()=>({id:123,title:'my title'})
};
</script>

Island.vue
声明props并接收参数

<template>
  <h1>
      {{id}} 
      -
      {{title}}
    </h1>
</template>

<script>
export default {
  props:['id','title']
};
</script>