vue路由的动态传值详解

路由跳转传值一种为路由的动态传值，一种为路由的get传值,先来介绍路由的动态传值。

一.路由的动态传值

路径要求严格，在配置路由的时候设置动态传值

1.基本配置

index.js 配置路由的节点

// 配置的路由节点
import Home from '../views/Home.vue'
import about from '../views/About'
//在配置路由的时候设置动态传值 类似/:id
export default[
  {
   
    path: '/',
    name: 'Home',
    component: Home
  },
  {
   
    path: '/about',
    name: 'About',
    component:about,
  }
]

router.js 配置整个的路由

//配置整个路由
import {
    createRouter, createWebHistory } from 'vue-router'
import routes from '../router/index'
const router = createRouter({
   
    history: createWebHistory(),
    routes
  })
export default router
  

main.js

import {
    createApp } from 'vue'
import App from './App.vue'
//引入路由文件
import router from './router/router'
const app=createApp(App);
app.use(router);
app.mount('#app');

主页面：App.vue

<template>
  <div id="app">
    <router-link to="/"