<vue 路由 6、动态路由-方法传递参数>

一、query效果

点击query按钮

二、param效果

点击param按钮

注意点

1：重新刷新浏览器后，参数都不在了。

2：url中能看不到传递的参数

3、分别用{{$route. params.name}}和方法的方式获取传递过来的参数并展现。

三、代码结构

注：主要是标红的几个文件

四、代码

index.js

//引入路由
import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'

//定义路由
const routes = [{
		path: '/',
		name: 'Home',
		component: Home
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue')
	},
	{
		path: '/query',
		name: 'Query',
		component: () => import('../views/Query.vue')
	},
	{
		path: '/params',
		name: 'Params',
		component: () => import('../views/Params.vue')
	}
]

//创建路由
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
	history: createWebHistory(process.env.BASE_URL),
	routes
})

//返回了路由
export default router

App.vue

<template>
	<div id="nav">
		<router-link to="/">Home</router-link> |
		<router-link to="/about">About</router-link> |
		<button @click="queryMethod"> query按钮 </button>
		<button @click="paramsMethod"> param按钮 </button>

	</div>
	<router-view></router-view>
</template>

<script>
	import { defineComponent, ref  } from 'vue'
	import { useRouter } from 'vue-router'
	export default defineComponent({
		name: 'App',
		setup() {
			//setup组件创建的过程
			let router = useRouter()
			let name = ref('jack')
			let num = ref(10)
			let obj = ref({
				msg: 'start'
			})

			let queryMethod = () => {
				//push如果是传的对象的形式 就可以传递参数
				//query 传参
				//push里面还可以传入name，  name是路由名字index.js里定义的
				//query传参path和name都可以  传递参数 参数在地址栏里 刷新后参数还在
				router.push({
					//path : '/query',
					name: 'Query',
					query: {
						//前面的name可以随便取
						name: name.value,
						num: num.value,
						obj: JSON.stringify(obj)
					}
				})
			}

			let paramsMethod = () => {
				//push如果是传的对象的形式 就可以传递参数
				//params 传参
				//push里面还可以传入name，  name是路由名字index.js里定义的
				//params传参只能用name   参数不会在地址栏里  刷新后参数会消失
				router.push({
					name: 'Params',
					params: {
						//前面的name可以随便取
						name: name.value,
						num: num.value,
						obj: JSON.stringify(obj)
					}
				})
			}
			return {
				queryMethod,
				paramsMethod
			}
		}
	})
</script>

Home.vue

<template>
  <div class="home">
	  <p>Home Page</p>
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>

<script>
</script>

About.vue

<template>
  <div class="about">
    <h1>about page</h1>
  </div>

</template>

Query.vue

<template>
	<div class="about">
		<h1>Query page</h1>
		<div> {{$route.query.name}} </div>
		<div> {{$route.query.num}}</div>
		<div> {{$route.query.obj}}</div>
		<div>
			<p>-------如下是方法里获得的参数---------</p>
		</div>
		<div> {{name}} </div>
		<div> {{num}} </div>
		<div> {{obj}}</div>

	</div>
</template>

<script>
	//编写js内容

	import {defineComponent,ref} from 'vue'
	import {useRouter,useRoute} from 'vue-router'
	export default defineComponent({
		name: 'Query',
		components: {

		},
		setup() {
			//router 是全局路由对象
			let router = useRouter()
			//route是当前路由对象
			let route = useRoute()
			console.log(route.query.name)
			console.log(route.query.num)
			console.log(route.query.obj)

			let name = route.query.name
			let num = route.query.num
			let obj = route.query.obj

			return {
				name,
				num,
				obj

			}
		}
	})
</script>

Params.vue

<template>
  <div class="about">
    <h1>Params page</h1>

	<div> {{$route.params.name}} </div>
	<div> {{$route.params.num}}</div>
	<div> {{$route.params.obj}}</div>
	<div>
		<p>-------如下是方法里获得的参数---------</p>
	</div>
	<div> {{name}} </div>
	<div> {{num}} </div>
	<div> {{obj}}</div>

  </div>

</template>

<script>
	//编写js内容

	import {defineComponent,ref} from 'vue'
	import {useRouter,useRoute} from 'vue-router'
	export default defineComponent({
		name: 'Query',
		components: {

		},
		setup() {
			//router 是全局路由对象
			let router = useRouter()
			//route是当前路由对象
			let route = useRoute()
			console.log(route.params.name)
			console.log(route.params.num)
			console.log(route.params.obj)

			let name = route.params.name
			let num = route.params.num
			let obj = route.params.obj

			return {
				name,
				num,
				obj

			}
		}
	})
</script>