39.Vue3：路由传递参数

准备工作：

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path:'/news',
    name:'news',
    component:() => import("../views/NewsView.vue")
  },
  {
    path:'/newsdetails',
    name:'newsdetails',
    component:() => import("../views/NewsDetails.vue")
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

 

需要拥有如下几个组件，其中，News组件是个列表，点击列表中的每个li标签可以跳转到newsdetails组件中。

传递参数

第一步：

在路由配置中顶顶参数的key：在src/router/index.js

  {

    // 在后面加一个/: 代表后面的是需要传递参数key值，以后调用也是使用这个名称

    path:'/newsdetails/:name',

    name:'newsdetails',

    component:() => import("../views/NewsDetails.vue")

  }

第二步：

在跳转的页面中携带参数，跳转页面：NewsView.vue

<template>
    <ul>
        <li><router-link to="/newsdetails/网易">网易新闻</router-link></li>
        <li><router-link to="/newsdetails/今日">今日新闻</router-link></li>
        <li><router-link to="/newsdetails/头条">头条新闻</router-link></li>
    </ul>
</template>

第三步：

在跳转页面读取路由携带的参数

<template>
    <h1>新闻详情页面</h1>
    <!-- name就是定义时的key -->
    <p>{{ $route.params.name }}</p>
</template>