前言：很多网站都有页面的跳转，那具体页面跳转是怎样实现的？今天学习前端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>
