vue3 路由的嵌套、跳转和传值

**嵌套路由**
 {
    
    
        path: '/home',
        component: () => import('../views/Home.vue'),
        children: [{
    
    
            path:'',
            redirect:'/home/product'
        },{
    
    
            path:'product',
            component:()=>import('../views/HomeProduct.vue')
        }]
    }

页面中的使用

通过点击按钮来跳转

import {
    
     useRouter } from "vue-router"
const router = useRouter()
const jumpBtn = () => {
    
    
	  router.push('/product')
}

query方式的参数

    const router = useRouter();
    const jumpTo = () => {
    
    
      router.push({
    
    
        path: "/about",
        query: {
    
    
          name: "fuck",
        },
      });
    };

在界面中通过 $route.query 来获取参数：

 {
    
    {
    
    $route.query}}

页面的前进后退

import {
    
     useRouter } from 'vue-router'
const router = useRouter()

<van-icon name="arrow-left" @click="router.back()" />