路由跳转传递参数注意事项,查询字符串传参,params传参需要注意的地方,菜单内容的二级内容 vue3

 路由跳转和传参(vue3)_vue3路由传参-CSDN博客

 注意:

 路由跳转传递参数注意事项,查询字符串传参,params传参需要注意的地方,菜单内容的二级内容 vue3_第1张图片

import {useRouter} from "vue-router"

const router=useRouter()

1.查询字符串传参,传一个对象,对象里面可以写path字段

router.push(
    {
        path:'/item',
        query:{id:1}
    }
)

通过当前路由拿到查询字符串传递过来的参数

        import { useRoute } from 'vue-router';
		const route = useRoute();
		console.log(route.query.id);

2.params传参,传一个对象,注意:对象里面不能写path字段了,只能写name字段

const router = useRouter();

router.push(
    {
		name:'item',
		params:{id:1}
	}
)

通过当前路由拿到params传递过来的参数

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.params.id);

 在router.js文件中

路由跳转传递参数注意事项,查询字符串传参,params传参需要注意的地方,菜单内容的二级内容 vue3_第2张图片路由跳转传递参数注意事项,查询字符串传参,params传参需要注意的地方,菜单内容的二级内容 vue3_第3张图片

 菜单的内容的二级内容,这个内容不会出现在侧边栏中

路由跳转传递参数注意事项,查询字符串传参,params传参需要注意的地方,菜单内容的二级内容 vue3_第4张图片 

你可能感兴趣的:(前端,javascript,vue.js)