如何将url参数传递给Vuejs
如何将url参数传递给Vuejs
提问于 2015-09-14 16:20:06
我正在用laravel和VueJs构建一个应用程序，我想知道如何以适当的方式将像user slug或user id这样的url参数传递给vuejs，以便能够使用该参数进行ajax请求？
例如，当某人单击指向
domain.com/user/john-appleseed我想在我的vuejs应用程序中发出一个ajax请求，参数为'john-appleseed‘。
什么是“正确/恰当”的方式呢？
提前感谢！
回答 5
Stack Overflow用户
发布于 2016-05-11 18:04:00
在这里，vue-router可能会有所帮助。它可以让你像这样定义你的路由：
router.map({
'/user/:slug': {
component: Profile,
name: 'profile'
},
})然后，在您的Profile组件中，请求的用户的插件将在this.$route.params.slug下可用
有关详细信息，请查看官方文档：http://router.vuejs.org/en/
Stack Overflow用户
发布于 2016-01-27 01:38:59
我想你正在构建一个组件。假设您在该组件中有一个按钮，当单击该按钮时，您希望执行一个操作(AJAX请求，或者只是重定向)。
在这种情况下，您将URL作为参数传递给组件，您可以在内部使用它。
HTML：
<my-component login-url="get_url('url_token')">您的组件JS：
export default {
props: {
loginUrl: {required: true},
},
...
}然后，您可以在组件中以this.loginUrl的身份访问该参数。
请注意，参数名称在HTML部分中为破折号，而在JS中为camelCase。
Stack Overflow用户
发布于 2017-10-17 23:52:00
如果您正在使用vue-router，并且想要捕获查询参数并将它们传递给props，您可以这样做。
被调用的Url：http://localhost:8080/#/?prop1=test1&prop2=test2
MyComponent.vue
<template>
<div>
{{prop1}} {{prop2}}
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
prop1: {
type: String,
required: true
},
prop2: {
type: String,
default:'prop2'
}
}
</script>
<style></style>路由器/index.js
import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent'
Vue.use (Router)
Vue.component ('my-component', MyComponent)
export default new Router ({
routes: [
{
path: '/',
name: 'MyComponent',
component: MyComponent,
props: (route) => ({
prop1: route.query.prop1,
prop2: route.query.prop2
})
}
]
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32560184
复制相关文章
相似问题
腾讯云开发者
