diff --git a/_examples/README.md b/_examples/README.md index 13bfefdd..d6e23913 100644 --- a/_examples/README.md +++ b/_examples/README.md @@ -101,6 +101,7 @@ * [Embedding Gzipped Files Into App Executable File](file-server/embedding-gzipped-files-into-app/main.go) * [Send Files (rate limiter included)](file-server/send-files/main.go) * Single Page Applications + * [Vue Router](file-server/spa-vue-router) * [Basic SPA](file-server/single-page-application/basic/main.go) * [Embedded Single Page Application and `iris.PrefixDir`](file-server/single-page-application/embedded-single-page-application/main.go) * [Embedded Single Page Application with other routes](file-server/single-page-application/embedded-single-page-application-with-other-routes/main.go) diff --git a/_examples/file-server/spa-vue-router/frontend/css/page.css b/_examples/file-server/spa-vue-router/frontend/css/page.css new file mode 100644 index 00000000..04a5c737 --- /dev/null +++ b/_examples/file-server/spa-vue-router/frontend/css/page.css @@ -0,0 +1,4 @@ +.router-link-active { + color: red; + } + \ No newline at end of file diff --git a/_examples/file-server/spa-vue-router/frontend/index.html b/_examples/file-server/spa-vue-router/frontend/index.html new file mode 100644 index 00000000..99eb9bc8 --- /dev/null +++ b/_examples/file-server/spa-vue-router/frontend/index.html @@ -0,0 +1,30 @@ + + + + + + + Iris + Vue Router + + + + + + +
+

Hello App!

+

+ + + + Go to Foo + Go to Bar +

+ + + +
+ + + + \ No newline at end of file diff --git a/_examples/file-server/spa-vue-router/frontend/js/app.js b/_examples/file-server/spa-vue-router/frontend/js/app.js new file mode 100644 index 00000000..f114c6d6 --- /dev/null +++ b/_examples/file-server/spa-vue-router/frontend/js/app.js @@ -0,0 +1,33 @@ +// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter +// and then call `Vue.use(VueRouter)`. + +// 1. Define route components. +// These can be imported from other files +const Foo = { template: '
foo
' } +const Bar = { template: '
bar
' } + +// 2. Define some routes +// Each route should map to a component. The "component" can +// either be an actual component constructor created via +// `Vue.extend()`, or just a component options object. +// We'll talk about nested routes later. +const routes = [ + { path: '/foo', component: Foo }, + { path: '/bar', component: Bar } +] + +// 3. Create the router instance and pass the `routes` option +// You can pass in additional options here, but let's +// keep it simple for now. +const router = new VueRouter({ + routes // short for `routes: routes` +}) + +// 4. Create and mount the root instance. +// Make sure to inject the router with the router option to make the +// whole app router-aware. +const app = new Vue({ + router +}).$mount('#app') + +// Now the app has started! \ No newline at end of file diff --git a/_examples/file-server/spa-vue-router/main.go b/_examples/file-server/spa-vue-router/main.go new file mode 100644 index 00000000..5018288a --- /dev/null +++ b/_examples/file-server/spa-vue-router/main.go @@ -0,0 +1,32 @@ +// Package main simply shows how you can getting started with Iris and Vue Router. +// Read more at: https://router.vuejs.org/guide/#html +package main + +import "github.com/kataras/iris/v12" + +func main() { + app := iris.New() + app.HandleDir("/", "./frontend") + + app.Listen(":8080") +} + +/* For those who want to use HTML template as the index page + and serve static files in the root request path + and use vue router as the main router of the entire application, + please follow the below code example: + +func fullVueRouter() { + app := iris.New() + app.RegisterView(iris.HTML("./views", ".html")) + app.OnAnyErrorCode(index) + app.HandleDir("/", "./frontend") + app.Get("/", index) + + app.Listen(":8080") +} + +func index(ctx iris.Context) { + ctx.View("index.html") +} +*/