时间戳

首页 > 解决方案 > 如何重定向到vue js中的特定组件

vue.js - 如何重定向到vue js中的特定组件

问题描述

我想在不刷新页面的情况下在 URL 内重定向，而不使用如下路由器链接：

<router-link to="/about us " active-class="active">foo</router-link>

我想打印如下路线：

<li class="nav-item phone">
    <a class="nav-link" href="contact-us.html">
        اتصل بنا
    </a>
</li>

我的路线：

const routes = [
    { path: '/aboutus/', component: AboutUs }
]

标签： vue.jsvuejs2vue-componentvue-router

解决方案

您可能需要一个解决方法。

此解决方案不会改变url任何一个:)

html在数据中设置一个

    data: () => {
        return {
            html: null
        }
    }

使用任何请求获取文件的内容html并分配给htmlindata部分。您可以从任何生命周期挂钩中获取它。我在这里使用beforeMount.

    beforeMount() {
        this.fetchAllEmployees();
        axios.get('contact-us.html')
            .then(response => {
                this.html = response.data;
            })
    }

现在您可以html像这样显示组件中的内容

<template>
    <div>
        <div v-html="html"></div>
    </div>
</template>

要仅在单击a标签时显示，您可以在data其中添加另一个可用于切换值的变量。

推荐阅读