通过从路由中导入 useRoute useRouter 使用 route 和 router

传递参数

import {defineComponent } from "vue";
import { useRouter } from 'vue-router'
export default defineComponent({
    setup() {
        const $router = useRouter()
           // 命名路由
            let toAbout=()=>{
            $router.push({name:'About',params:{id:1}})    //传递参数
            }
       
           //query传值
            let toNews=()=>{
            $router.push({path:'/news',query:{id:2}})    //传递参数
            }

           return {
               toAbout,
               toNews
           };
    }
})

接收参数

import {defineComponent } from "vue";
import { useRoute } from 'vue-router'
export default defineComponent({
    setup() {
      const $route = useRoute()
      onMounted(()=>{
        console.log($route.params.id)        //   打印 params 的参数
        
        console.log($route.query.id)         //   打印 query 的参数
      })
    },
})

路由跳转传值一种为路由的动态传值，一种为路由的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="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
   name:'app',
    
  }
</script>

两个子组件：
Home.vue

<template>
  <div class="home">
    home组件
  </div>
</template>
<script>
export default {
  name: 'Home',
}
</script>

About.vue

<template>
  <div id="about">
    about组件
  </div>
</template>
<script>
export default {
  name:'about',
}
</script>

界面结果显示：

2.在配置的路由节点动态传值

在配置的路由里进行传值
index.js

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

主页面：App.vue

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    //如果配置动态传值 点击跳转的时候也要进行传值
    <router-link to="/about/1000">About</router-link>//此为静态的传的值1000
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
   name:'app',
    
  }
</script>

界面结果显示：

• 如何获取路由的值在About.vue里

About.vue

<template>
  <div id="about">
    about组件
  </div>
</template>
<script>
export default {
  name:'about',
  mounted(){
  //挂载完成获取路由的动态传值
  //this.$route 此api是当前路由的相关匹配参数
    console.log(this.$route.params.id);
}
</script>

结果显示：

• 如果想要在App.vue绑定动态传值

App.vue

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    //动态绑定 使用es6 字符串模板
    <router-link :to="`/about/${id}`">About</router-link>
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
   name:'app',
   data(){
    return{
      id:123456
    }
  }
  }
</script>

界面结果显示：

• 如果路由上传多个值

index.js

// 配置的路由节点
import Home from '../views/Home.vue'
import about from '../views/About'
export default[
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
  //在后面继续添加
    path: '/about/:id/:name',
    name: 'About',
    component:about,
  }
]

App.vue也要做出相应的变化

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link :to="`/about/${id}/${name}`">About</router-link>
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
   name:'app',
  data(){
    return{
      id:123456,
      name:'jiang',
    }
  }
  }
</script>

界面结果显示：

vue 路由get传值链接：
https://blog.csdn.net/weixin_47863547/article/details/119189387

1.动态路由传值

在我这个项目里要实现的是从 News.vue 跳转到Content.vue

News.vue

<template>
 <!-- 所有的内容要被根节点包含起来-->
 <div id="news">
     我是一个新闻组件
     <br>
     
    <ul>
        <li v-for="(item,key) in list">
            <router-link :to="'/content/'+key">{{key}}---{{item}}</router-link>
            <!--<router-link to="/content/aid=123">{{key}}---{{item}}</router-link> 将aid写死 -->
        </li>
    </ul>
 </div>
</template>

<script>

export default {
 data(){
     return {
         msg:'我是一个news组件',
         list:['111','222','333']
     }
 }
 
}
</script>

Content.vue （主要是第16行和第17行）

<template>
    <div id="content">
        我是详情页面
    </div>
</template>

<script>


export default {
    data(){
        return{
            msg:"数据"
        }
    },
    mounted(){
        console.log(this.$route.params);//获取动态路由传值
    }
}
</script>

在main.js 中配置路由（第16行与第23行）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//导入并使用
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//2.配置路由  注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },/* 动态路由*/
  { path: '/pcontent', component: Pcontent },
  { path: '*', redirect: '/home' }//默认跳转路由
]

//3.实例化VueRouter  注意，名字一定不能错
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4.挂载路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//5.根组件的模板里放上这句话  <router-view></router-view>

最后在控制台中你可以看到：

点了 key=2 的内容，获取了aid。

2.get传值

在这里我要实现的是从 Home.vue 跳转到 Pcontent.vue

Home.vue(主要为第8行)

<template>
    <!-- 所有的内容要被根节点包含起来-->
    <div id="home">
        我是首页组件
        <br>
        <ul>
        <li v-for="(item,key) in list">
            <router-link :to="'/pcontent?aid='+key">{{key}}---{{item}}</router-link>
        </li>
    </ul>
        
    </div>
</template>  

<script>

export default {
    data(){
        return {
            msg:'我是一个home组件',
            list:['商品111','商品222','商品333']
        }
    }
    
}
</script>

Pcontent.vue(主要是第18行)

<template>
    <div id="pcontent">
        商品详情
    </div>
</template>

<script>


export default {
    data(){
        return{
            msg:"数据",
        }
    },
    mounted(){
        //get传值
        console.log(this.$route.query);
    }
}
</script>

在main.js 中配置路由（第17行与第24行）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//导入并使用
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//2.配置路由  注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },/* 动态路由*/
  { path: '/pcontent', component: Pcontent },
  { path: '*', redirect: '/home' }//默认跳转路由
]

//3.实例化VueRouter  注意，名字一定不能错
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4.挂载路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//5.根组件的模板里放上这句话  <router-view></router-view>

最后的效果是这样的：

为方便大家查看，我放上根组件和我的目录结构
这是App.vue 根组件

<template>
  <div id="app">
    
    <router-link to="/home">Go to Home</router-link>
    <router-link to="/news">Go to News</router-link>
    
    <hr>
    <router-view></router-view>

  </div>
</template>

<script>
/** 1不同路由传值，动态路由
 * 
 * 
 * (1).配置动态路由
 * routes:[
 *      //  动态路径参数 以冒号开头
 *      {path: '/user/:id',component:User}
 * ]
 * 
 * (2).在对应的页面
 * this.$route.params 获取动态路由的值
 * 
 * 
 * 2.get传值
 * 
 * 
 * (1).配置动态路由
 * routes:[
 *      //  动态路径参数 以冒号开头
 *      {path: '/user',component:User}
 * ]
 * 
 * (2).在对应的页面
 * this.$route.query 获取动态路由的值
 * 
 */
export default {
  name: 'App',
  data(){
    return{
      msg:'你好vue'
    }
  }
  
}
</script>

<style>

</style>

目录结构

若有任何疑问或是不解请在下方评论，谢谢。