016-vue-router路由传参引用实践(有说明)

[toc]

vue-router路由传参引用实践(有说明)

说明

1. 发送参数的方式有两种, 分别是query和params

2. 他们的区别是:

3. 发送参数: params只能使用name的方式传递,  而query则可以支持path和name两种方式

4. 接收参数后: params在刷新页面后参数就会消失, 而query不会(会留在地址栏内, 而params不会)

目标

通过vue-router路由功能, 分别使用query和params传递参数, 感受其相似处和不同处, 一遍未来不同场景灵活运用

需求

通过vue-router路由功能, 使用Start.Vue路由跳转到Home.vue, 并且通过queary传递参数, 需要传递参数类型为int sting obj三种类型

例1 - 使用query传递参数

文件结构

src/

router/

index.js

views/

Start.vue

Home.vue

// @/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import Start from '../views/Start.vue'

import Home from '../views/Home.vue'

const routes = [

{

path: '/',

name: 'Start',

component: Start

},

{

path: '/home',

name: 'Home',

component: Home

}

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

// @/App.vue

<template>

<div>

<!-- 注意, 如果使用路由, 那么在必须添加<router-view/>标签 -->

<router-view/>

</div>

</template>

// @/views/Start.vue

<template>

<div>

<div>Start.vue</div>

<button @click="goHome">开始任务</button>

</div>

</template>

<script>

import { defineComponent, ref } from 'vue'

import { useRoter } from 'vue-router'

export default defineCompoment({

name: 'example',

setup(){

let router = useRouter()

let name = ref('jack')

let age = ref(18)

let obj = ref({

studySubject: ['english', 'math', 'program']

})

let goHome = () => {

router.push({

path: '/home',

//name: 'Home', //(可选)query也支持使用name进行导航传参(name就是路由名称, 在@/router/index.js中有定义)

query: {

name: name.value,

age: age.value,

obj: JSON.stringify(obj.value) //在进行复杂类型传递时(例如对象和数组), 注意需要使用JSON.stringify先转换成字符串, 再发送

}

})

}

return{

goHome

}

}

})

</script>

// @/views/Home

<template>

<div>

<div>

name: {{name}}, age: {{age}}, obj: {{obj}}

</div>

</div>

</template>

<script>

import { useRoute } from 'vue-router' //观察区分userRouter和useRoute

import { defineComponent } from 'vue'

export default defineComponent({

name: example,

setup(){

let route = useRoute()

//接收到name, age, obj

let name = route.query.name

let age = route.query.age //注意: 所有接收到的参数, 不管是什么类型, 全部接收到的是字符串, 所以这里的age实际上是字符串.

let obj = JSON.prase(route.query.obj) //注意: 将已经转为字符串的对象转换回对象.

return{

name,

age,

obj

}

}

})

</script>

例2 - 使用params传递参数

文件结构

src/

router/

index.js

views/

Start.vue

Home.vue

// @/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import Start from '../views/Start.vue'

import Home from '../views/Home.vue'

const routes = [

{

path: '/',

name: 'Start',

component: Start

},

{

path: '/home',

name: 'Home',

component: Home

}

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

// @/App.vue

<template>

<div>

<!-- 注意, 如果使用路由, 那么在必须添加<router-view/>标签 -->

<router-view/>

</div>

</template>

// @/views/Start.vue

<template>

<div>

<div>Start.vue</div>

<button @click="goHome">开始任务</button>

</div>

</template>

<script>

import { defineComponent, ref } from 'vue'

import { useRoter } from 'vue-router'

export default defineCompoment({

name: 'example',

setup(){

let router = useRouter()

let name = ref('jack')

let age = ref(18)

let obj = ref({

studySubject: ['english', 'math', 'program']

})

let goHome = () => {

router.push({

name: 'Home', //params仅仅支持使用name的方式

params: { //和query使用方式相同

name: name.value,

age: age.value,

obj: JSON.stringify(obj.value)

}

})

}

return{

goHome

}

}

})

</script>

// @/views/Home

<template>

<div>

<div>

name: {{name}}, age: {{age}}, obj: {{obj}}

</div>

</div>

</template>

<script>

import { useRoute } from 'vue-router'

import { defineComponent } from 'vue'

export default defineComponent({

name: example,

setup(){

let route = useRoute()

//接收到name, age, obj

//1. 注意, 刷新后通过params接收到的参数会消失

let name = route.params.name

let age = route.params.age

let obj = JSON.prase(route.params.obj)

return{

name,

age,

obj

}

}

})

</script>