先来介绍下什么是单页面应用（SPA）
v2-036237de3e0741f8210da19d778135e6_1440w.jpg

1. 引入路由功能

script引入

  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

在模块化中

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. Vue.use(VueRouter)

2. 创建VueRouter实例

  1. const User = {
  2.   template: '<div>User</div>'
  3. }
  5. const router = new VueRouter({
  6.   routes: [
  7.     // 动态路径参数 以冒号开头, name非必传参数
  8.     { path: '/user/:id', name:'user', component: User }
  9.   ]
  10. })

创建路由连接方式

1. 使用router-link

  1. <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2. 使用router.push()

  1. router.push({ name: 'user', params: { userId: 123 }})

命令式书写，在vue实例内部使用this.$router.push

  1. // 字符串
  2. router.push('home')
  4. // 对象
  5. router.push({ path: 'home' })
  7. // 命名的路由  /user/123
  8. router.push({ name: 'user', params: { userId: '123' }})
  10. // 带查询参数，变成 /register?plan=private
  11. router.push({ path: 'register', query: { plan: 'private' }}

百说不如一练，建议大家看看官方vue-router的demo学学就好了