实现效果如下：

获取URL中的参数，并显示在页面上

流程：

1.在index.js中编辑代码如下：

import {createRouter,createWebHashHistory} from 'vue-router'
import News from '../components/News.vue'
import Home from "../components/Home.vue"


// 1. Define route components.
// These can be imported from other files


// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path:"/news/:id*",
        component:News
    },
 
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = createRouter({
    // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
    history: createWebHashHistory(),
    routes, // short for `routes: routes`
})

export default router

2.新建News.vue

News.vue:

<template>
    <div>
        <h1>新闻页</h1>
        <p>参数：{{news_id}}</p>
    </div>
</template>

<script>
    export default {
        name: "News",

        data(){
            return {
                // 获取参数id
                news_id : this.$route.params.id
            }

        },
    }


</script>

<style scoped>

</style>