vue3路由跳转and接收参数

• 自己用v3写了个小项目，过程中用到了路由传参，几经周折终于可以顺利传参啦！
• vue3取消了2.0部分api，所以路由跳转传值方式有所不同。
• 当然有取消，肯定新增也是有的，所以vue3.0新增的API如下：

1. useRoute
2. useRouter                   

一.路由跳转

     (1):在要跳转的页面引入API--useRouter。

import { useRouter } from 'vue-router';

    (2):定义router变量接收一下API     

const router = useRouter();

    (3): 跳转路由

//单纯的跳转路由 
router.push('msg');

//对象形式
router.push({path:'msg'});

//命名路由，我的命名路由是Msg;passVlue是自定义的名称,input.value是input要输入的内容
router.push({ name:'Msg'},params:{passVlue:input.value});

//query的话路由就变成了msg?passVlue=在input输入的值
router.push({ name:'Msg'},query:{passVlue:input.value});

• 所以我自己写的真正的路由带传参的代码是这样的：

  router.push({ name:'Msg'},params:{passVlue:input.value});

    然而在之前是这样的：多加了个path

• router.push({path:'msg', name:'Msg'},params:{passVlue:input.value});

     渲染之后变成了undefined如下；所以要使用命名路由:

                这是要跳转的页面:

  这是接受参数的页面：

                                                               

 去掉path后：

要跳转的

 要接收的：

 (4):接收参数的页面定义引入route,并且定义状态：

//1:引入useRoute
import { useRoute } from 'vue-router';

//2:定义变量
const route = useRoute();

//3：在全局定义一个状态
let stringTex = ref<string>('');

//4:钩子函数里使用这个状态，接收路由传过来的参数
onMounted(() => {
//String(route.params.passValue)是因为传递过来的参数类型与状态类型不符合：状态类型是string，
而传递过来的参数是LocationQueryValue | LocationQueryValue[]
    stringTex.value = String(route.params.passValue);
});

(5):渲染到页面

<div >
        <span>{{ stringTex }}</span>
                   
 </div>

        我自己的结构：

        

 到这里就结束啦，小伙伴们还有什么方法，多多益善哦，请指教！