Vue SPA场景下如何从纯原生DOM调用$router.push方法？

我之前也碰到过类似的场景，Vue-Noty这类基于原生DOM渲染的通知库，确实没法直接用<router-link>，因为它不会被Vue的编译器处理。下面给你几个实用的解决办法：

方法一：将Router实例暴露到全局（简单直接） #

在你的项目入口文件（比如main.js）里，把创建好的Router实例挂载到window对象上，这样在原生JS环境里就能直接调用它：

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({ routes });

// 把router实例挂载到window全局
window.$router = router;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

之后在Vue-Noty的通知内容里，就可以用原生<a>标签结合全局的$router来实现跳转：

this.$noty.open({
  text: '您的会话已过期，<a href="javascript:void(0)" onclick="window.$router.push(\'/login\')">重新登录</a>'
});

注意：这种方法虽然简单，但会把router暴露到全局，如果你担心全局污染，或者项目是多Vue实例的场景，建议用下面的方法。

方法二：利用Noty的回调绑定点击事件（更符合Vue最佳实践） #

这种方法不需要暴露全局，而是在创建Noty的时候，通过它的onShow回调手动给链接绑定点击事件，直接使用Vue组件内的$router：

this.$noty.open({
  text: '您的会话已过期，<a href="javascript:void(0)" class="login-notify-link">重新登录</a>',
  onShow: (notyInstance) => {
    // 找到通知里的链接元素
    const loginLink = notyInstance.bar.querySelector('.login-notify-link');
    // 绑定点击事件
    loginLink.addEventListener('click', () => {
      this.$router.push('/login');
      // 可选：点击后关闭通知
      notyInstance.close();
    });
  }
});

这个方法的优势是完全在Vue组件的上下文里操作，不会污染全局环境，也更安全。

为什么你之前的尝试没生效？ #

• <router-link>是Vue的组件，Vue-Noty是直接把字符串插入原生DOM，不会经过Vue的编译流程，所以只会被当作普通文本渲染；
• 原生onclick里的this指向的是当前DOM元素，不是Vue组件实例，所以找不到$router；
• Vue的Router实例默认只挂载在Vue组件实例上，不会暴露到document或全局，所以直接通过window.document找不到它。

内容的提问来源于stack exchange，提问作者devman