Vue – Router

Posted by On 1月 07, 2018 0 Comment

Set up

To use vue-router, previous easy html does not work properly.
I set up simple environment using npm. Please follow

Install vue and vue-router

npm init 
npm install vue vue-router
npm install http-server -D

http-server is to run server locally. (It’s easy to try route)
To run http-server easily, I changed a bit of npm command.

{
  "name": "sample6",
  "version": "1.0.0",
  "description": "Vue Router Sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "http-server -o"
  },
  "keywords": [
    "Vue",
    "Router"
  ],
  "author": "DJ110",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.5.13",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

Hash mode and HTML5 mode

This is same as Angular.
By default, vue router is hash mode.

Mode Description
Hash mode Add # tag under root URL
HTML5 No hash tag, normal type

In this sample, I use HTML5 mode (not hash mode) to make URL simple.
We can set by code.

Sample Code

<html>
  <head>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.min.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/top">TopPage</router-link>
      <router-link to="/users">User List</router-link>
      <router-link :to="{ name: 'user', params: { userId: 123}}">User Details</router-link>
      <router-view></router-view>
    </div>
    <script>
    var router = new VueRouter({
      mode: 'history',  <!-- If delete, this is hash mode -->
      routes: [
        {
          path: '/top',
          component: {
            template: '<div>Top page</div>'
          }
        },
        {
          path: '/users',
          component: {
            template: '<div>User List</div>'
          }
        },
        {
          path: '/user/:userId',
          name: 'user',
          component: {
            template: '<div>User Id: {{ $route.params.userId}}</div>'
          }
        }
      ]
    })

    var app = new Vue({
      router: router
    }).$mount('#app')

    </script>
  </body>
</html>

router-view is changeable layout part.

TOPICS