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


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


 
<script setup>
script>
 
<style lang="scss" scoped>
style>

Test.vue文件


 
<script setup>
script>
 
<style lang="scss" scoped>
style>

main.ts导入路由

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


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

App.vue文件


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


 
<script setup>
script>
 
<style lang="scss" scoped>
style>

编程式


 
<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参数传参键=值&键=值

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

通过query调用

UI测试:{{ route.query.name }}

接口测试:{{ route.query.stage }}

路由传参

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

通过params调用

UI测试:{{ route.params.name }}

接口测试:{{ route.params.stage }}

通过props接受参数


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

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


 
<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


 
<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


 
<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


 
<script setup>
const props = defineProps(['result1', 'result2'])
script>
 
<style lang="scss" scoped>
style>