在Vue Router中将状态传递给受保护的路由（脚本设置方法）

Question

晕朋友，我需要向 vue-router 中的受保护路由发送一个状态。但在这样做时我遇到了错误。

Discarded invalid param(s) "_id", "dish_name", "description", "img", "ingredients", "instructions", "cooking_time", "chef", "createdAt", "updatedAt", "__v" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.    

我无法获取受保护路由中的参数，为什么？

这是我的代码

route.js 文件

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/reciepe/:id',
      name: 'individual-reciepe',
      component: SingleReciepe
    },
    {
      path: '/create_reciepe',
      name: 'create_reciepe',
      component: CreateReciepe,
      meta:{
        auth:true,
      },
      props:true,
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        auth: false
      }
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = isAuth()
  console.log(isAuthenticated)
  if (!isAuthenticated && 'auth' in to.meta && to.meta.auth) {
    next('/login')
  } else if (isAuthenticated && 'auth' in to.meta && !to.meta.auth) {
    next('/')
  } else {
    next()
  }
})
export default router

我路由到受保护路由的功能

import { useRouter, useRoute } from 'vue-router'

const router = useRouter(),
  route = useRoute();

function editReciepe() {
  console.log('in the edit')
  router.push({ name: 'create_reciepe', params:  reciepe.value  })
}

Answer 1

有很多方法可以从路由传递数据。我知道两种方法可以做到这一点。

第一种方式，您可以在路线上使用

props

，例如：（Option API方式）

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    ...,
    {
      name: 'team-members',
      path: ':id',
      component: TeamMembers,
      props: true,
    }
    ,,,,    
  ]
})

并通过

props

属性将数据映射到组件：

export default {
    props: ['id']
}

消费路线：

<router-link :to="'/teams/' + valuePassToRoute">View Members</router-link>

或

this.$router.push({name: 'team-members', params: { id: value },});

从路线获取数据：

const id = this.$route.params.id;

这是详细信息

#route

，值为

t1

如果使用

query

或

meta

属性，则没有太大区别。

消费路线：

this.$router.push({ name: 'team-members', params: { id: this.id }, query: { sort: 'asc' }};

获取数据：

const value = this.$route.query.sort;

第二种方式：（Composition API）

<script>
import { useRoute } from 'vue-router';
export default {
    props: ['pi'],
    setup() {
        const route = useRoute();
        const value = route.params.id
    }
}
</script>