Vue3 路由配置 + 路由跳转 + 路由传参的操作方法(动态路由传参 + 普通路由传参)

npm install vue-router@4

"vue-router": "^4.2.5",

src
│  App.vue
│  main.ts
│      
├─router
│   index.ts
│      
└─view
    HomeView.vue
    AboutView.vue
    TestView.vue

<template>
  <div>
    <div>这是home页面</div>
    <div>
      <button @click="toAboutPage">跳转至about</button>
    </div>
    <div>
      <button @click="toTestPage">跳转至test</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toAboutPage() {
  router.push({
    path: '/about',
    query: {
      title: '666'
    }
  })
}
function toTestPage() {
  router.push({
    path: '/test/' + 888,
  })
}
</script>
 

<template>
  <div>
    <div>这是about页面</div>
    <div>
      <button @click="toHomePage">跳转至home</button>
    </div>
    <div>
      <button @click="toTestPage">跳转至test</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
function toHomePage() {
  router.push({
    name: 'home',
    params: {
      title: 'about'
    }
  })
}
function toTestPage() {
  router.push({
    name: 'test',
    params: {
      title: 111
    },
  })
}
console.log(route);
</script>

<template>
  <div>
    <div>这是test页面</div>
    <button @click="toHomePage">跳转至home</button>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toHomePage() {
  router.push('/')
}
console.log(route);
</script>

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/test',
      name: 'test',
      component: () => import('../views/TestView.vue')
    },
  ]
})
export default router

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </nav>
  <RouterView />
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>

router.push('/') // 根页面，这里的“/”等同于home页面
router.push({
  path: '/about',
})

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

router.push({
    path: '/about',
    query: {
      title: '666'
    }
  })

 
  router.push({
    name: 'home',
    params: {
      title: 'about'
    }
  })

    {
      path: '/test/:title',
      name: 'test',
      component: () => import('../views/TestView.vue')
    },

 
  router.push({
    path: '/test/' + 888,
  })

 console.log(route);