frontend

＃如何使用Next.js路由器 学习如何使用next/router包来控制Next.js中的路由 在使用Link连接两个页面的Next.js上，我们看到了如何使用Link组件在Next.js应用中声明式地处理路由。 在JSX中管理路由非常方便，但有时您需要以编程方式触发路由更改。 在这种情况下，您可以直接访问Next.js的路由器，它位于next/router包中，并调用其push()方法。 下面是访问路由器的示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() //... } 通过调用useRouter()来获取路由器对象之后，我们可以使用它的方法。 这是客户端路由器，因此方法应仅在前端代码中使用。最简单的方法是将调用包装在useEffect() React钩子中，或者在React有状态组件中的componendDidMount()内部。 您最常使用的是push()和prefetch()。 push()允许我们以编程方式触发URL更改，如前端代码所示： router.push('/login') prefetch()允许我们以编程方式预取URL，在没有自动处理预取的Link标签时非常有用，如下所示： router.prefetch('/login') 完整示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() useEffect(() => { router.prefetch('/login') }) } 您还可以使用路由器来监听路由变更事件。

如何使用Vue Router，這是Vue應用程式中必不可少的一部分之一 簡介 在JavaScript網頁應用程式中，路由器是將目前顯示的視圖與瀏覽器地址欄內容同步的部分。 換句話說，它是當你在頁面上點擊某個元素時，使URL改變並顯示正確視圖的部分。 傳統上，網頁是基於URL構建的。當你訪問特定的URL時，會顯示特定的頁面。 隨著在瀏覽器內運行並改變使用者所見的應用程式的引入，許多應用程式打破了這種交互方式，你必須手動使用瀏覽器的History API更新URL。 當你需要將URL與應用程式中的視圖同步時，你就需要一個路由器。這是一個非常常見的需求，現代的主要框架現在都允許你進行路由管理。 Vue Router庫是Vue.js應用程式開發時的首選。Vue並不強制使用這個庫。你可以使用任何通用的路由庫，或者自己創建和History API集成，但是使用Vue Router的好處是它是官方的。 這意味著它是由維護Vue的同一群人維護的，所以你可以在框架中得到更一致的整合，並且保證它將始終與未來的版本兼容，無論是什麼版本。 安裝 Vue Router可以通過npm的vue-router包來獲取。 如果你使用script標籤引入Vue，可以使用以下方式引入Vue Router。 <script src="https://unpkg.com/vue-router"></script> unpkg.com是一個非常方便的工具，可以通過一個簡單的鏈接在瀏覽器中提供每個npm包 如果你使用Vue CLI，可以使用以下方式安裝 npm install vue-router 一旦你安裝了vue-router並使其可用，可以在你的應用程序中導入它。 你需要在vue之後導入它，並調用Vue.use(VueRouter)將其安裝在應用程序中。 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 在調用Vue.use()並傳遞路由器對象之後，在應用程式的任何組件中都可以訪問這些對象： this.$router是路由器對象 this.$route是當前路由對象 路由器對象 當在將Vue Router安裝到根Vue組件時，可以使用this.$router從任何組件中訪問路由器對象，它提供了許多不錯的功能。 我們可以使用以下方法導航至新路由： this.$router.push() this.$router.replace() this.$router.go() 這類似於History API的pushState，replaceState和go方法。 push()用於切換到新的路由，將新項目添加到瀏覽器的歷史記錄中。replace()類似，只是它不會將新狀態推送到歷史記錄中。 使用示例： this.$router.push('about') //命名路由，稍後查看 this.$router.push({ path: 'about' }) this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //使用查詢參數（post?post_slug=hello-world） this.$router.replace({ path: 'about' }) go()可以前進和後退，接受一個可能為正或負的數字來倒退或前進歷史記錄：...

在什麼情況下使用Node.js是一個好主意？為什麼選擇Node.js而不是其他解決方案？本文旨在回答這個問題。 在建立任何類型的軟件時，都有大量的Node.js替代方案。 為什麼Node.js是一個好選擇？ 在本文中，我將告訴你一些使用它的好理由。 Node.js是JavaScript JavaScript可能是世界上最受歡迎的編程語言。 JavaScript是唯一一種可以運行在Web瀏覽器中的語言，這使得它比任何其他語言都具有獨特的優勢。 隨著React Native、Electron和類似的解決方案的崛起，它也是唯一一種可以用來創建網絡應用、前端和後端、手機應用、桌面應用的語言。 它非常通用，一旦你在某個領域掌握了JavaScript語言，你的技能可以很容易地轉移到另一個領域，你只需要學習環境的差異（例如，如何使用React Native而不是Electron，或者DOM）。 這是你在其他地方找不到的。 此外，JavaScript是一門非常出色和靈活的語言。 如果你已經因為在瀏覽器中工作而熟悉JavaScript，那麼選擇Node.js就是显而易见的。 Node.js是事件驅動和單線程的 這是什麼意思？簡單來說，它可以很好地處理大量的負載。 每個Node.js程序都可以處理大量的並發連接，由於其非阻塞的I/O特性，仍然非常快速。 這意味著你擁有一切必要的工具來構建一個非常高效的系統。 Node.js非常受歡迎 這帶來了一些副作用。 首先，你會發現在線上討論任何類型的問題時都能找到解決方案。社區非常龐大且樂於助人。 它很容易入門，並且有很多可以學習的資源。 其次，有一個庫可以解決任何問題。 npm庫中有大量可以隨時使用的庫，只需運行一個簡單的npm install命令即可。 由於其受歡迎程度，一個惡性循環形成：你最喜歡的API可能只提供一個官方的Node.js庫，而其他語言可能根本就不被考慮，只能使用非官方的軟件包（質量不一）。 你可以輕鬆部署Node.js應用 有些編程環境需要專用的設置，即使是簡單的項目也是如此，因為沒有人為它們建立生態系統。 Heroku以簡化Rails應用程序開發而聞名，如今在Node.js中我們也有其他可比擬的解決方案。 我考慮的是Zeit Now。 當我需要一個能夠輕鬆設置一個示例Node.js應用程序並與世界共享的場所時，我會想到Glitch（提示：它也可以運行私有應用程序）。