21.Vue3.x中的路由(2) 动态路由 get传值 js跳转路由

一、动态路由传值

在route.ts中配置动态路由，传递参数需要在path后面加 “/:xxx”

{
   
    path:'/newscontent/:title',
    component:NewsContent
}

import NewsContent from "@/components/NewsContent.vue";
// 配置路由
const router=createRouter({
   
    history:createWebHashHistory(),
    routes:[
        {
   
            path:'/',
            component:Home
        },
        {
   
            path:'/news',
            component:News
        },
        {
   
            path:'/user',
            component:User
        },
        {
   
            path:'/newslist',
            component:NewsList
        },
        {
   
            path:'/newscontent/:title',
            component:NewsContent
        }
    ]
})

新建NewsList.vue组件,创建新闻列表

并配置router-link，动态传递参数

 <router-link :to="`/newscontent/${item}`">{
  {item}}</router-link>

<template>
    <h1>NewsList组件</h1>
    <ul>
        <li v-for="(item,index) in list" :key="index">
           <router-link :to="`/newscontent/${item}`">{
  {item}}</router-link>
        </li>
    </ul>
</template>

<script lang="ts">
    import {
    defineComponent} from "vue";

    // data数据接口
    interface News {
    
        list: string[],
    }

    export default defineComponent({
    
        name