vue3备忘vueRouter

付艺轩

已于 2024-05-29 08:53:17 修改

阅读量272

点赞数 4

文章标签： vue.js javascript 前端 uni-app

于 2024-04-29 16:32:08 首次发布

本文链接：https://blog.csdn.net/qq_45292320/article/details/138317542

版权

本文介绍了如何在Vue3项目中使用vueRouter4进行路由配置，包括基本设置、声明式和编程式导航，以及参数传递（params和query）的方法。

摘要由CSDN通过智能技术生成

vue3备忘vueRouter

准备

vue3需要vueRouter4

配置

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    {
        path: "/",
        redirect: '/comA'
    }, {
        path: '/comA',
        component: () => import('../views/comA.vue')
    }, {
        path: '/comB/:id',
        component: () => import('../views/comB.vue')
    }, {
        path: '/comC',
        component: () => import('../views/comC.vue')
    }

]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

在main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

在app中显示

<script setup>
</script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style>
body{
  margin: 0;
}
</style>

声明式导航

<template>
  <div>
      <！--声明式导航-->
    <router-link to="/comB">toB</router-link>
  </div>
</template>

<script setup>


</script>
<style scoped lang="less">
</style>

编程式导航

<template>
  <div>comB</div>
  <button @click = toC()>toC</button>
  {{ route.params.id }}
</template>

<script setup>
import { useRouter } from "vue-router"
//编程式导航
const router = useRouter()
function toC() {
  router.push("/comC")
}

</script>
<style scoped lang="less">
</style>

导航传参

params传参

router.js配置

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    {
        path: "/",
        redirect: '/comA'
    }, {
        path: '/comA',
        component: () => import('../views/comA.vue')
    }, {
        //配置
        path: '/comB/:id',
        component: () => import('../views/comB.vue')
    }, {
        path: '/comC',
        component: () => import('../views/comC.vue')
    }

]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

传参

<template>
  <div>
      <!--传参-->
    <router-link to="/comB/47">toB</router-link>
  </div>
</template>

<script setup>

</script>
<style scoped lang="less">
</style>

获取

<template>
  <div>comB</div>
	<!--获取-->
  {{ route.params.id }}
</template>

<script setup>
import { useRouter,useRoute } from "vue-router"

const route = useRoute()

</script>
<style scoped lang="less">
</style>

query传参

传参

<template>
  <div>comB</div>
</template>

<script setup>
import { useRouter,useRoute } from "vue-router"

const router = useRouter()
function toC() {
   //传参
  router.push("/comC?type=哈哈哈")
}

</script>
<style scoped lang="less">
</style>

获取

<template>
    <div>comC</div>
	<!--获取-->
    {{ route.query.type }}
</template>

<script setup>
import { useRouter,useRoute } from "vue-router"

const route = useRoute()


</script>
<style scoped lang="less">
</style>