vue中的动态路由

最新推荐文章于 2025-06-26 09:52:40 发布

Simple_IDE

最新推荐文章于 2025-06-26 09:52:40 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/simple5960/article/details/116051493

vue 专栏收录该内容

59 篇文章

订阅专栏

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.js

{
        path: '/edit/articleEdit/:articleId',
        name: 'articleEdit',
        component:():any=>import('../components/ArticleEdit.vue'),
      }

跳转

router.push({name:'articleEdit',params:{articleId:articleId}})

前端传请求

const route=useRoute();
        console.log(route.params.articleId);
        axios({
            url:`${baseURL}/editArticle/${route.params.articleId}`,
            method:"post",
        })
        .then(res=>{
            console.log(res);
        })

后端接口与接收请求

 //router.js
 router.post('/editArticle/:articleId',controller.home.editArticle)
//app.js
async editArticle()
  {
    const {ctx,app}=this;
    const {articleId}=ctx.params.articleId
    console.log(articleId);
    ctx.body={
      success:articleId
    }
  }