正文 

当前位置： 首页 > 源码 >

如何在 nuxt.js 上手动触发路由？

     2023-03-16     43

关键词：

【中文标题】如何在 nuxt.js 上手动触发路由？【英文标题】：How to manually trigger routing on nuxt.js? 【发布时间】：2021-07-26 23:41:01 【问题描述】：

我想在回调中登录后手动导航到主页。

  methods: 
    async userLogin() 
      var session_url = "/api/v1/authenticate";
      axios
        .post(session_url, this.login, )
        .then(function (response) 
          console.log("Authenticated", response.data.access_token);

          window.localStorage.setItem("token", response.data.access_token);
          // Manually trigger route here.
        )
        .catch(function (error) 
          console.log("Error on Authentication", error);
        );
    ,
  ,

【问题讨论】：

【参考方案1】：

要手动触发路由，可以使用下面的代码，其中/是家乡路由。

注意：无需导入任何内容，因为$router 是全球可用的。

this.$router.push("/" )

【讨论】：

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

如何在 Nuxt 中使路由区分大小写

】如何在Nuxt中使路由区分大小写【英文标题】：HowtomakeroutescasesensitiveinNuxt【发布时间】：2019-12-2017:32:18【问题描述】：我使用nuxt.js+vue.js。我需要创建路由器的区分大小写。我发现了以下属性：caseSensitive。我正在尝试将它放入n... 查看详情

Vuetify Nuxt.js：如何在轮播图标中添加路由链接

】VuetifyNuxt.js：如何在轮播图标中添加路由链接【英文标题】：VuetifyNuxt.js:howtoaddRoutinglinkinCarouselsicon【发布时间】：2021-01-1301:19:14【问题描述】：js和Vuetfiy我想在Carousels图标中添加路由链接。如果我按图标，它应该打开路由链接... 查看详情

nuxt.js服务端渲染中如何实现路由的跳转

一、nuxt.js路由跳转1、nuxt-link标签跳转在html标签内使用nuxt-link跳转，相应于超链接a标签，使用方式如下：<nuxt-linkto="/">首页</nuxt-link>2、编程式导航-JS代码内部跳转实际项目中，很多时候都是通过在JS代码内部进行导航的... 查看详情

您如何在 Nuxt JS (s-s-r) 中使用来自无头 CMS 的路由？

】您如何在NuxtJS(s-s-r)中使用来自无头CMS的路由？【英文标题】：HowdoyouuseroutesfromaheadlessCMSinNuxtJS(s-s-r)?【发布时间】：2020-10-0100:43:59【问题描述】：问题我正在尝试使用CMS定义的路由来获取内容，该内容用于确定在我的Nuxt前端中... 查看详情

如何在 Nuxt 中用一个组件创建无限路由

】如何在Nuxt中用一个组件创建无限路由【英文标题】：HowcreatetheinfiniteroutewithonecomponentinNuxt【发布时间】：2021-10-1415:29:07【问题描述】：我最近收到了一个使用Nuxt.js的项目，但遇到了一些问题。我有一个从API获取一些产品并从Vu... 查看详情

Nuxt.js：如何重定向内部方法

】Nuxt.js：如何重定向内部方法【英文标题】：Nuxt.js:howtoredirectinsidemethods【发布时间】：2021-06-3002:12:48【问题描述】：我正在学习Nuxt.js，但我对通过单击触发的方法简单地将用户重定向到另一个页面似乎有多么困难感到困惑。设... 查看详情

如何在移动设备上手动触发 mouseleave 事件

】如何在移动设备上手动触发mouseleave事件【英文标题】：Howtomanuallytriggerthemouseleaveeventonamobiledevice【发布时间】：2021-11-2022:49:42【问题描述】：我想将hover上的链接颜色更改为橙​​色。在移动设备上，当用户触摸该链接时，它... 查看详情

如何在 nuxt.js 上从子组件获取父组件的值？

】如何在nuxt.js上从子组件获取父组件的值？【英文标题】：HowtogetanvaluefromChildcomponenttoParentonnuxt.js?【发布时间】：2019-11-3022:31:48【问题描述】：我一直在尝试将数据从子A($emit)组件传递给父组件，从父组件传递给子B(props)。使用n... 查看详情

如何在 vercel zeit 上使用 Tailwindcss 2.0 部署 nuxt.js 项目

】如何在vercelzeit上使用Tailwindcss2.0部署nuxt.js项目【英文标题】：Howtodeployanuxt.jsprojectwithTailwindcss2.0onvercelzeit【发布时间】：2021-05-1610:18:19【问题描述】：我正在尝试使用tailwind.css2.0上传一个基本的nuxt.js项目。我用过：yarnadd--devta... 查看详情

如何管理来自 API 的大量路由及其与 Nuxt 路由器模块的组件关联

】如何管理来自API的大量路由及其与Nuxt路由器模块的组件关联【英文标题】：HowtomanagebunchofroutesfromAPIandtheircomponentassociationwithNuxtroutermodule【发布时间】：2020-10-0608:13:28【问题描述】：您好，亲爱的Nuxt/Vue/Node社区，我在我的Nuxt.j... 查看详情

如何在nuxt.js中实现handsontable

】如何在nuxt.js中实现handsontable【英文标题】：Howtoimplementhandsontableintonuxt.js【发布时间】：2020-06-2608:31:04【问题描述】：我正在尝试在我使用的项目上安装handsontablenpminstallhandsontable@handsontable/vue也许我需要创建一个插件？如何在... 查看详情

在 Nuxt.js 中完全呈现路由后运行函数

】在Nuxt.js中完全呈现路由后运行函数【英文标题】：RunfunctionAFTERroutefullyrenderedinNuxt.js【发布时间】：2019-09-0519:51:09【问题描述】：背景：我正在使用Nuxt构建一个s-s-r网站。我想运行一个脚本到fixsometypographyissues（标题中的孤立... 查看详情

Nuxt.js 嵌套路由加载问题

】Nuxt.js嵌套路由加载问题【英文标题】：Nuxt.jsnestedrouteloadingissue【发布时间】：2021-01-0203:11:36【问题描述】：以上所有代码均来自我在pages/apibuilder/models文件夹中的文件_id.vue我用它来用数据填充我的商店asyncasyncData(store)//this.data... 查看详情

nuxt.js入门安装及灵活使用(代码片段)

...板代码4.5.2、head5、ajax操作5.1、整合axios5.1.1默认整合5.1.2手动整合5.1.3、常见配置5.2、使用axios发送ajax5.3、使用asyncData发送ajax5.3.1发送一次请求5.3.2、发送多次请求5.4、使用fetch发送ajax5.5、插件：自定义axios5.1客户端5.5.2服务端... 查看详情

如何在 nuxt js 中使用 vuetify 作为插件？

】如何在nuxtjs中使用vuetify作为插件？【英文标题】：Howtousevuetifyinnuxtjsasplugin?【发布时间】：2020-04-2321:43:53【问题描述】：我需要在我的nuxtjs项目中使用vuetify作为插件。我试过包@nuxtjs/vuetify，但得到错误无法分配给对象“#”的... 查看详情

如何让 Nuxt.js 同时接受 `/` 和 `/index.html` URL？

】如何让Nuxt.js同时接受`/`和`/index.html`URL？【英文标题】：HowcanImakeNuxt.jsacceptboth`/`and`/index.html`URL?【发布时间】：2020-07-0316:39:53【问题描述】：我正在使用Nuxt.js默认模式、通用和历史路由器。当我运行nuxtgenerate并获得一个网站时... 查看详情

nuxt.js的学习路由组件的学习(代码片段)

...2、axios请求数据3、axios拦截器4、Vue-Router nuxt-link5、动态路由（一）vue的动态路由（二）文件夹动态路由 6、嵌套路由 7、中间件8、Nuxt生命周期流程图分析1、异步加载数据asyncDataasyncData方法会在组件（限于页... 查看详情