Vue.js with Flask server ... Entering url directly into browser does not use vue.js for rendering.

Question

I have vue.js client code with flask server backend code. If I click on various links in my browser app, the links get (using axios) data from backend and render the data properly e.g, if I have a router-link to http://localhost:5000/books. But if I enter this same url directly in the browsers address bar, I get back the raw json from server (i.e, it does not go via vue.js to render in my html table). I am using mode: "history" in my router.js file.

I have browsed other related queries on SO, but still unable to grasp what exactly I need to do to make this work (they all seem to recommend using history mode, which I am. In other cases, they say I need to configure flask to handle such requests .. but do not clearly say what I need to do to handle such requests). Any one have clear idea about this ?

Router.js File
==============================
export default new Router({
  routes: [
    { path: "/",        name: "home",   component: Home  },
    { path: "/about",   name: "about",  component: About },
    { path: "/ping",    name: "Ping",   component: Ping  },
    { path: "/books",   name: "Books",  component: Books },

    { path: "/*", name: "NotFound", component: NotFound } /*Catch All*/ 
  ],
  mode: "history"
});

Below is excerpt from my flask app.

Flask App.py
============
from flask import Flask, jsonify, request, send_from_directory, render_template
from flask_cors import CORS

# instantiate the app
app = Flask(__name__, static_url_path='', static_folder='static')
app.config.from_object(__name__)
CORS(app)
...
...
@app.route('/books', methods=['GET'])
def GetAllBooks():
... 
... 
@app.route('/')
@app.route('/index.html')
def index():
    return app.send_static_file('index.html')

@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)

if __name__ == '__main__':
    app.run()

Below is my table rendered when I click on "Books" link.

Below is the data returned if I enter the url directly in the address bar.

Janardhan Singh · Accepted Answer · 2020-09-05 08:23:17Z

2

In my case i use this. For more check this

from flask import Flask, render_template, abort
from jinja2 import TemplateNotFound

app = Flask(__name__, static_folder="./static", template_folder="./templates")


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    try:
        return render_template('index.html')
    except TemplateNotFound:
        abort(404)


if __name__ == '__main__':
    app.run(debug=True)

Now URL localhost:5000/about will be redirected to index.html and vue-router will handle it within itself.

answered Sep 5, 2020 at 8:23

Janardhan Singh

4976 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeffery Li · Accepted Answer · 2018-08-10 08:23:34Z

1

I've encountered the same issue and solved it with Flask catch-all rules. Flask will catch the url /books and then pass it to Vue application. Since you have activated mode: "history" in Vue, The component Books will be rendered .

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')               # url /books will fail into here
def index(page):
    return app.send_static_file('index.html')

@app.route('/static/<path:path>')
def static_file(path):
    return app.send_static_file(path)

edited Aug 10, 2018 at 8:23

answered Aug 9, 2018 at 22:13

Jeffery Li

5651 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Vue.js with Flask server ... Entering url directly into browser does not use vue.js for rendering.

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related