Vue Router example 1 - Named Routes and Named Views

This is a simple example of how you can setup Vue Router with named routes and views.

Named views allow you to mount components to specific sections of the page based on the route.

They are a powerful and simple way to manage your UI.

Full explanation of the project here - http://patrickwho.me/vue-js-router-named-routes-views/

Getting Started

In your terminal:

# Clone this repo in your current directory

1. git clone https://github.com/patrickodacre/vue-router-example-1 .

# rename env.example.js to env.js

2. npm install

# Install json-server for our mock API

3. npm install json-server -g

# Generate our mock data and serve on your choice of port
# make sure the port matches that in env.js

4. json-server generate.js --port 3004

# Start the app

5. npm run dev

Visit http://patrickwho.me/vue-js-router-named-routes-views/ for the full walk through.

If you use VS Code, you can open test.http and use the Rest Client extension to test the server responses.