vue3路由传参

创建router.js

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'yemian1',
    component: () => import('../views/yemian1.vue')
  },
  {
    path: '/yemian2',
    name: 'yemian2',
    component: () => import('../views/yemian2.vue')
  },
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

main.js中配置router

import router from './router'
let app = createApp(App)
app.use(router)

跳转方式

1.router-link

<router-link to="/">跳转到yemian1</router-link>
<router-link to="/yemian2">跳转到yemian2</router-link>

2.编程式跳转

router(vue2里面$router)里面是路由跳转的方法

//引入
import { useRouter } from "vue-router";
//申明
const = router = useRouter()
function jampyemina(){
    //直接写
    router.push('/')
    //或
	router.push('/yemian2')
	//path跳转
	router.push({path:'/'})
	//或
	router.push({path:'/yemian2'})
	//name跳转
	router.push({name:'yemian1'})
	//或
	router.push({name:'yemian2'})
}

3.路由传参

<router-link to="/?id=1&name=no.1">跳转</router-link>

3.1.query传参

query传参 可以使用path也可以使用name跳转且参数会显示在浏览器url栏中
优点刷新不丢值
缺点传的参数过多不美观
3.1.1.router-link

<router-link 
  :to="{
    //name:'yemian1', //用name也可以跳转
    path:'/',
    query:{
      id:'1',
      name:'no.1'
    }
  }"
>
  跳转
</router-link>

3.1.2.编程式

//引入
import { useRouter } from "vue-router";
//申明
const = router = useRouter()
function jampyemina(){
	router.push(
		{
		 path:'/',
		 query:{
		   	id:'1',
		   	name:'no.1'
		 }
	)
	//或
	router.push(
		{
		 name:'yemian1',
		 query:{
		   	id:'1',
		   	name:'no.1'
		 }
	)
	//或
	router.push(
	 	{
	 	 path:'/yemian2',
		 query:{
		   id:'2',
		   name:'no.2'
		 }
		}
	)
	//或
	router.push(
		{
		 name:'yemian2',
		 query:{
		   	id:'2',
		   	name:'no.2'
		 }
	)
}

3.2.query传参 目标路由取参
route(vue2里面的$route)里面包含路由跳转的信息

<script setup>
//引入
import { useRoute } from "vue-router";
//申明
const = route = useRoute()
//打印
console.log(route.query)
</script>

3.3.params传参
先在路由中配置

  {
    path: '/:id:name?',
    name: 'yemian1',
    component: () => import('../views/yemian1.vue')
  },
 {
    path: '/yemian2/:id:name?',
    name: 'yemian2',
    component: () => import('../views/yemian2.vue')
  },

params传参只能使用name跳转
3.3.1.router-link

<router-link 
  :to="{
    //只能用name跳转
    name:'yemian1',
    params:{
      id:'1',
      name:'no.1'
    }
  }"
>
  跳转
</router-link>

3.3.2.编程式

//引入
import { useRouter } from "vue-router";
//申明
const = router = useRouter()
function jampyemina(){
	router.push(
		{
		 name:'yemian1',
		 params:{
		   	id:'1',
		   	name:'no.1'
		 }
	)
	//或
	router.push(
		{
		 name:'yemian2',
		 params:{
		   	id:'1',
		   	name:'no.1'
		 }
	)

3.3.params传参 目标路由取参

<script setup>
//引入
import { useRoute } from "vue-router";
//申明
const = route = useRoute()
//打印
console.log(route.params)
</script>