Question

我想要的是当我单击图像时，它重定向到由something/image_name创建的URL（另一个视图）。我正在vue.js中制作项目。我正在考虑通过使用道具（将所需的所有变量从第一个视图传递到下一个视图）来实现。但是数据不会显示在第二视图中。另外，我想知道如何制作类似something/image_name的URL。我通过对URL进行硬编码来使用它。

routes.js

const router = new Router({
    mode: "foo",
    base: "foobar",
    routes: [
        {
            path: "/event/:title",
            name: "event",
            component: event,
            props: true,
        }

其中title是变量（更准确地说是event.title），我想从其他视图传递。我也想在网址中获得title。

查看1

<template>
    <div src="image_location" :to="/event/{{event.title}}"></div>
</template>
<script>
export default {
    name: "event",
    components: {
        Event
    },
    data: function initData() {
        return {
            event: {},
        };
    },
};
</script>

视图2 （Event.vue）（其网址应为foobar / event / {{title}}）

props: {
        event: Object,
    }

我也尝试过router-link，但是缺乏文档说明使我无法有效地使用它。

Answer 1

您可以在图像上添加@click事件，并在用户单击图像时以编程方式将用户移至新的URL。像这样：

  <imge src="..." @click="$router.push(`/event/${event.title}`)" />

将变量从一个视图发送到另一视图并在Vue中发送URL

1 个答案: