前端基础（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文件

Test.vue文件 

main.ts导入路由

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

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

 

App.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: () => 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元素 

编程式

页面的跳转

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

展示效果

获取路由信息

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

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

路由传参方式

参数传参

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

通过routerLink传参调用测试过程

通过query调用

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

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

路由传参 

通过Params传参

通过params调用 

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

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

通过props接受参数

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

result通过Params传参

完整代码

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 

views/Step.vue

views/Result.vue