vue中的动态路由

注意:如果提供了 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
    }
  }
上一篇:关于asp.net中使用Ajax post方式调用asmx页面报错:未知Web方法的解决办法


下一篇:JavaScript从作为函数实参的对象中提取数据