1.準備，安裝webpack和vue-cli，根據官網教程構建專案。搭建好的專案如下：

2.配置路由
1). 在components中建立Page.vue，在router中的index.js中配置路由。

import Vue from 'vue'
//1.匯入路由元件vue-router
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Page from '@/components/Page'
//2.呼叫vue-router
Vue.use(Router)
//3.建立vue-router例項
const
 
 router=new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },
    {
      path: '/Hello',
      component: Hello
    },
    {
      path: '/Page', //路徑
      name: 'Page', //名稱
      component: Page //元件
    }
  ]
});
export default route;

2). 在入口檔案中配置路由，這裡的入口檔案是main.js

import Vue from
 
 'vue'
//匯入路由
import router from './router/index.js'

new Vue({
  el: '#app',
  router,//配置路由
})

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>
        <!-- router-link設定連結 -->
        <router-link to="/Page">去Page</router-link>
    </p>
 

    <!-- router-view展示資訊 -->
    <router-view></router-view>
  </div>
</template>

3.動態路由
使用：開頭設定動態路徑

new Router({
    routes:[
        {
          path: 'user/:id',
          name: 'user',
          component: user
        }
    ]
})

router-link寫法如下

<router-link :to="{name:'user', params:{id: '123'}}">姓名</router-link>

渲染出/user/123，使用$route.params.id獲取id

4.巢狀路由
/User/userName

new Router({
    routes:[
        {
          path: '/User',
          name: 'User',
          component: User,
          children: [
                {
                  path: 'userName',
                  name: 'userName',
                  component: userName
                }
          ]
        }
    ]
})