FusionRouter
Start building your UI with a powerful, fine-grained and expressive router library that supports both static and dynamic routes.
Introduction
FusionRouter is a router library created for UI made with Fusion. Inspired by Vue Router, the official router for VueJS. FusionRouter allows developers to create UI without caring too much about the navigation. With its simple yet expressive syntax, developers can easily adopt FusionRouter in their existing Fusion projects with some code changes.
Basic Usage
Expand me
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Packages = ReplicatedStorage.Packages
local Router = require(Packages.Router)
local Fusion = require(Packages.Fusion)
local pages = script.Parent.Pages
local appRouter = Router { -- Creates a new router. In this table, you define routes! You can use the index for defining the path route, just make sure it's FusionRouter-compliant and that it is a string. Otherwise you can just define the path inside the route entry, under the name `Path`
["/"] = {
Page = require(pages.Home), -- This is where you provide your page! When setting the router to serve this route, all RouterView will re-render itself by setting the RouterView children to the Instance returned by this function.
Data = { -- If your routes have something in common and that you need to refer to it later, consider using the data field as it will be converted to a state. Useful for displaying route title (titlebars, etc).
Title = "Home",
},
}
["/shop/"] = {
Page = require(pages.Shop),
Data = {
Title = "Shop",
},
},
["/product/:id/"] = { -- FusionRouter supports dynamic routing! This is very useful when the page function depends on a parameter. You can also just provide the parameter when you are calling the :push function, but this might look nicer for parameters that are short.
Page = require(pages.Product),
Data = {
Title = "Viewing Prioduct",
}
},
}
appRouter:addRoute({ -- You can also add routes directly to the router with the addRoute method, the path field must be defined for this function
Path = "/example/",
Page = function(params) return New "TextLabel" { Text = params.Text } end, -- The page function has a table as the first parameter. params.Router will return the current Router class, useful when you need to call methods like :back() or :push(). Route parameters can be found in this table too. Just get it by its parameter name.
Data = {
Title = "Example Page",
}
})
appRouter:push("/product/492039/", {
Currency = "USD", -- You can put down route parameters here! They will be accessible in the first parameter of the page function, just like the example above!
})
appRouter:back() -- You can create implicitly-defined navigation with this method. It goes back to the previous page, errors if it can't though!
appRouter:back(5) -- Want to go back more than 1 page? Just provide a number!
appRouter:canGoBack() -- since :back() errors if it can't go back, you can use this method to prevent embarrassing errors!
appRouter:canGoBack(5) -- and yes, you can do this too.
appRouter.CurrentPage -- This table is the currently served route! You can access data like Route.Data, Route.Path, Route.Page and even Route.Parameters
appRouter.CurrentPage.Path:get() -- Route.Path and Route.Page here are states, use :get() to get the value
appRouter.CurrentPage.Data:get() -- For the data field, it's a StateDict. Call :get() to get the actual dictionary table. After that, non-tables are retrievable as a state.
appRouter.CurrentPage.Data:get().Title:get() -- Like this!
appRouter:getRouterView() -- Want to see the page now? Call this method and put it into your Fusion UI.
return appRouter
Documentation
Documentation for FusionRouter is regularly updated when a new version comes out. Take a look at here.
Installation
FusionRouter is available on Wally, get it by adding the following line to your configuration file:
Router = "7kayoh/fusionrouter@1.0.0"
For those without Wally, you can always get FusionRouter by visiting the releases section. Make sure your Wally installation is inside ReplicatedStorage.Packages as FusionRouter is designed to be installed with Wally.
Created by Frappé Development with 💖 • Open sourced under the MIT license
