晕朋友,我需要向 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 })
}
有很多方法可以从路由传递数据。我知道两种方法可以做到这一点。
第一种方式,您可以在路线上使用
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>