如何重定向到vue js中的特定组件答案

【问题标题】：how to redirect to specific component in vue js如何重定向到vue js中的特定组件
【发布时间】：2020-07-11 06:13:49
【问题描述】：

我想在不刷新页面的情况下在 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 }
]

【问题讨论】：

使用router-link，无论如何它都会生成一个a标签。不刷新就无法链接到像contact-us.html 这样的实际文件。您也许可以使用 iFrame？如果您想要一个用于 SEO 的多页应用程序，请使用 Nuxt/SSR。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

试试这个

this.$router.push('about')

【讨论】：

这取决于您要将页面重定向到哪里。例如，如果您将此代码放在组件的 created 生命周期中，它会在组件加载时重定向页面。
这是一个 javascript 代码。把它放在你想要的地方

【解决方案2】：

您可能需要解决此问题。

此解决方案也不会更改 url :)

在数据中设置html

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

使用任何请求获取您的html 文件的内容并分配给data 部分中的html。您可以从任何生命周期挂钩中获取它。这里我使用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 中添加另一个变量，用于切换值。

【讨论】：