vue3路由跳转

1.安装路由插件

npm install vue-router@next -S

2.建一个router/index.js

/从vue-router按需导入两个方法
//createRouter用于创建路由实例对象
//createwebHashHistory用于指定路由的工作模式
import { createWebHashHistory,createRouter} from 'vue-router'
import Computed from "../components/computend.vue"
import Ref from "../components/ref.vue"


const router = createRouter({
    //指定路由的工作模式
    history: createWebHashHistory(),
    routes:[
        {path:'/computed',component:Computed},
        {path:'/ref',component:Ref}
    ]
})
export default router

3.

第一种跳转

  <router-link to="/computed">computend</router-link>|
  <router-link to="/ref">ref</router-link>
  <router-view></router-view>

第二种跳转（编程式）

按需引入是useRouter

接收参数的时候是useRoute

<button @click="tz">跳转</button>       //1
import {useRouter} from "vue-router"   //2
export default {
  name: 'App',
  setup() {
    const router=useRouter()         //3
    function tz(){                  //4
      router.push({
        path:"/ref"
      })
    }
    return {
      list, car,tz
    }
  },
}

4.传参

 function tz(){
      router.push({
        path:"/ref",
        query:{
          name: "大哥",
          age: 12
        }
      })
    }

接收 (useRouter)

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