vue3 | vue-router | 路由跳转&传参

vue-router

官网 router.vuejs.org/zh/guide/

v3.router.vuejs.org/zh/guide/es…

使用

安装

对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：

npm install vue-router@4

如果你打算启动一个新项目，你可能会发现使用 create-vue 这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：

npm create vue@latest

全局注册

import router from './router/index'

const app = createApp(App)

app.use(router)
app.mount('#app')

定义路由参数

在src路径下，创建router文件夹，再创建一个index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // home页面
    {
      path: '/',
      name: 'home',
       component: () => import('home路径')
    },
    // signUp页面
    {
      path: '/signUp',
      name: 'signUp',
      component: () => import('signUp路径')
    },   
  ]
})

export default router

引入路由

<template>
    <div @click="linkToSignUp"></div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const msgQuery = ref('传参信息')

const linkToSignUp = () => {
    router.push({
        path:'/signUp'，
        query:msgQuery
    })
}
</script>

<template>
    <div @click="linkToHome"></div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const linkToHome = () => {
    router.push({
        path:'/home'
    })
}
</script>