VUE3 路由的跳转方法

Routerlink跳转方法

name属性对应了路由文件配置的name
path属性对应了路由的路径

<RouterLink to="/login">点击跳转登陆</RouterLink>
<RouterLink :to="{name:'login'}">点击跳转登陆</RouterLink>
<RouterLink :to="{path:'/login'}">点击跳转登陆</RouterLink>

RouterLink跳转的传递参数写法

如何传递query参数 通过?来表示是query参数 & 来连接多个参数 键值对 用 = 来表示

<RouterLink :to="`/login?id=${1}&name=${'张三'}&age=${18}`">点击跳转登陆</RouterLink>|
            <RouterLink :to="{
                path:'/login', //可使用path或者name
                query:{id:1,name:'张三',age:18}
            }">点击跳转登陆</RouterLink>|
            <RouterLink :to="{
                name:'login',
                query:{id:1,name:'张三',age:18}
            }">点击跳转登陆</RouterLink>|

//接收参数
let route = useRoute();
let {id,name,age} = route.query;

query参数适合修改详情页面 在分页中拿到该数据所有的参数 带到详情页面将修改页面的初始值替换成具体参数

如何传递params参数 通过修改路由配置文件来制定参数名字

路由配置中

    path: '/login/:id/:name/:age?',
    name: 'login',

如果配置可传属性需要在最后加?必须是最后一个参数 保证其清晰的参数名字
params传参必须用name
params传参
不能写对象类型和数组类型

路由跳转写法

<RouterLink :to="`/login/${1}/${'张三'}/${18}`">点击跳转登陆</RouterLink>|
<RouterLink :to="{
   name:'login',
   params:{id:1,name:'张三',age:18}
}">点击跳转登陆</RouterLink>

//获取参数
let route = useRoute();
let {id,name,age} = route.params;

params参数适合新闻or展示类的组件 在分页或者主页获取到文章ID或者详情ID 跳转到详情页 拿到ID请求整个详情页面的数据接口

路由props传参

路由配置中的写法

    {
      path: '/login',//登陆页面
      name: 'login',
      component:Login,
      // props:true,//将params参数传递给组件
      props(route) { //将路由信息传递给组件
        return route.query
      },
    }, 

            <RouterLink :to="{
                name:'login',
                query:{id:1,name:'张三',age:18}
            }">点击跳转登陆</RouterLink>|
            //or
            <RouterLink :to="{
                name:'login',
                params:{id:1,name:'张三',age:18}
            }">点击跳转登陆</RouterLink>|
            //获取参数
defineProps(['id','name','age'])

函数式路由跳转 ——最常用

	const router = useRouter();//获取路由实例 useRouter 需要从vuerouter中引入 
    router.push({ //query参数 path跳转路由
        path: item.path,
        query: {
            id: item.id,
            name: item.name,
            componentName: item.componentName
        }
    });
    router.push({ //params传参 使用name跳转路由
        name: item.componentName,
        params: {
            id: item.id,
            name: item.name,
            componentName: item.componentName,
            path: item.path
        }
    });
    router.replace({ // replace 无前进后退记录跳转路由
        name: item.componentName,
        params: {
            id: item.id,
            name: item.name,
            componentName: item.componentName,
            path: item.path
        }
    });

自动导入vue、vuerouter中的函数和方法
https://blog.csdn.net/HarryHY/article/details/148543123?spm=1001.2014.3001.5501