This commit is contained in:
Gerasimos (Makis) Maropoulos 2020-10-04 19:04:10 +03:00
parent cc7e3860f2
commit 0069bccd75
No known key found for this signature in database
GPG Key ID: 5DBE766BD26A54E7
5 changed files with 100 additions and 0 deletions

View File

@ -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)

View File

@ -0,0 +1,4 @@
.router-link-active {
color: red;
}

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iris + Vue Router</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="/css/page.css">
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>

View File

@ -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: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 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!

View File

@ -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")
}
*/