Vue3 路由配置 + 路由跳转 + 路由传参（动态路由传参 + 普通路由传参）

Vue Router： Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

效果

一、介绍

 1、官方文档：https://router.vuejs.org/zh/introduction.html

介绍 | Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/introduction.html

2、功能：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

二、准备工作

1、安装依赖包

npm install vue-router@4

 2、示例版本 

"vue-router": "^4.2.5",

三、目录结构

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

四、使用步骤

1、新建页面（含当前页面完整示例代码）

        HomeView.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>

        AboutView.vue

<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>

        TestView.vue

<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>

2、路由配置

        main.ts

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')

        routet/index.ts

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

        App.vue

<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>

五、路由跳转

1、使用 router-link 组件进行导航  + 通过传递 `to` 来指定链接

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

2、编程式导航

router.push('/') // 根页面，这里的“/”等同于home页面

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

注：必须配置下列代码

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

六、路由传参

1、普通路由

        1）query

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

        2）params

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

2、动态路由

        路由配参

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

         动态传参

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

        接收参数

console.log(route);

        打印结果

注：路由之间跳转用router，获取当前页面的路由信息用route

3、对比普通路由和动态路由在浏览器的展现形式

        1）普通路由传参 - 有问号

        2）动态路由传参 - 直接跟在地址后面

   

 欢迎扫码下方二维码关注VX公众号