前端基础（Vue Router路由的使用）

前言：很多网站都有页面的跳转，那具体页面跳转是怎样实现的？今天学习前端SPA(Single page Application)单页面应用，不反复请求后端资源，而是通过路由实现页面的跳转。

目录

路由的创建

main.ts导入路由

App.vue文件

展示效果

子路由

router文件导入

子路由创建

链接式

编程式

页面的跳转

展示效果

获取路由信息

路由传参方式

参数传参

路由传参 

完整代码

---

安装vue-router

npm install vue-router

路由的创建

在router文件夹下创建一个index.ts文件，默认导出

路由的动态导入

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: () => {
      return import("@/views/Home.vue");
      },
    },
    {
      path: "/test",
      component: () => {
      return import('../views/Test.vue');
      },
    },
  ]
})
export default router;

其中Home.vue文件

<template>
  <div>
    <h1>欢迎来到MRJJ_9的路由学习之旅</h1>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

Test.vue文件 

<template>
  <div>
    <h1>这是MRJJ_9的学习记录</h1>
    <ul>
        <li>step</li>
        <li>result</li>
    </ul>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

main.ts导入路由

在main.ts文件中导入使用，一定要保存！！！

import router from './router'
createApp(App).use(router).mount('#app')

 

App.vue文件

<template>
<main>
    <router-link to="/home">首页</router-link>
    <br/>
    <router-link to="/test">详情</router-link>
    <RouterView></RouterView>
</main>
</template>


<script setup>
</script>

<style scoped>

</style>

展示效果

子路由

router文件导入

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      component: () => {
        return import('@/views/Home.vue')
      }
    },
    {
      path: '/test',
      component: () => import('../views/Info/Test.vue'),
      children: [
        {
          path: 'step',
          component: () => import('../views/Info/step.vue')
        },
        {
          path: 'result',
          component: () => import('../views/Info/result.vue')
        }
      ]
    }
  ]
})
export default router

子路由创建

链接式

使用RouterLink元素 

<template>
  <div>
    <h1>这是MRJJ_9的学习记录</h1>
    <ul>
      <li><RouterLink to="/test/step">测试过程</RouterLink></li>
      <li><RouterLink to="/test/result">测试结果</RouterLink></li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

编程式

<template>
  <div>
    <h1>这是MRJJ_9的学习记录</h1>
    <ul>
      <li @click="toStep">测试过程</li>
      <li @click="toResult">测试结果</li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>

<script setup>
// import router from '@/router'
import { useRouter } from 'vue-router'
const router = useRouter()
function toStep() {
  router.push('test/step')
}
function toResult() {
  router.push('test/Result')
}
</script>

<style lang="scss" scoped>
</style>

页面的跳转

function backwordRouter() {
  router.back()
}
function forwordRouter() {
  router.forward()
}
function jumpRouter() {
  router.go(-3)
}

展示效果

获取路由信息

useRoute() 当前页面的路由信息

useRouter() 整个项目的路由信息

路由传参方式

参数传参

query urlencoded参数传参 键=值&键=值

<li><router-link to="/test/step?name=mrjj&stage=10">通过routerLink传参调用测试过程</router-link></li>

通过query调用

<li>UI测试:{{ route.query.name }}</li>

<li>接口测试:{{ route.query.stage }}</li>

路由传参 

<li><router-link to="/test/step/mrjj/100">通过Params传参</router-link></li>

通过params调用 

<li>UI测试:{{ route.params.name }}</li>

<li>接口测试:{{ route.params.stage }}</li>

通过props接受参数

{path: 'result/:result1?/:result2?',
props:true,
component: () => import('../views/info/result.vue')}

<li><router-link to="/test/result/success/fail">result通过Params传参</router-link></li>

<template>
  <ul>
    <li>测试通过:{{ result1 }}</li>
    <li>测试不通过:{{ result2 }}</li>
  </ul>
</template>

<script setup>
const props = defineProps(['result1', 'result2'])
</script>

<style lang="scss" scoped>
</style>

完整代码

router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      component: () => {
        return import('@/views/Home.vue')
      }
    },
    {
      path: '/test',
      component: () => import('../views/info/Test.vue'),
      children: [
        {
          path: 'step/:name?/:stage?',
          component: () => import('../views/info/step.vue')
        },
        {
          path: 'result/:result1?/:result2?',
          props:true,
          component: () => import('../views/info/result.vue')
        }
      ]
    }
  ]
})
export default router

views/Test.vue 

<template>
  <div>
    <h1>这是MRJJ_9的学习记录</h1>
    <ul>
      <li><router-link to="/test/step?name=mrjj&stage=10">通过routerLink传参</router-link></li>
      <li><router-link to="/test/step/mrjj/100">通过Params传参</router-link></li>
      <li><router-link to="/test/result/success/fail">result通过Params传参</router-link></li>
      <li @click="toStep">测试过程</li>
      <li @click="toResult">测试结果</li>
      <li @click="backwordRouter">后退</li>
      <li @click="forwordRouter">前进</li>
      <li @click="jumpRouter">跳几步</li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>

<script setup>
// import router from '@/router'
import { useRouter } from 'vue-router'
const router = useRouter()
function toStep() {
  router.push('test/step')
}
function toResult() {
  router.push('test/Result')
}
function backwordRouter() {
  router.back()
}
function forwordRouter() {
  router.forward()
}
function jumpRouter() {
  router.go(-3)
}
</script>

<style lang="scss" scoped>
</style>

views/Step.vue

<template>
  <ul>
    <li>UI测试:{{ route.query.name }}</li>
    <li>接口测试:{{ route.query.stage }}</li>
    <li>_______________________________</li>
    <li>UI测试:{{ route.params.name }}</li>
    <li>接口测试:{{ route.params.stage }}</li>
  </ul>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
console.log('router是：', router)
console.log('route是：', route)
</script>

<style lang="scss" scoped>
</style>

views/Result.vue

<template>
  <ul>
    <li>测试通过:{{ result1 }}</li>
    <li>测试不通过:{{ result2 }}</li>
  </ul>
</template>

<script setup>
const props = defineProps(['result1', 'result2'])
</script>

<style lang="scss" scoped>
</style>