10分钟学会如何在组件化的vue项目中使用vue-router实现基本的路由功能

1.在components文件夹中创建组件（当然也可以创建子文件夹）

假设建立了三个组件：

Home.vue            //假设路径时src/components/Home.vue

First.vue       //假设路径时src/components/First.vue

Second.vue       //假设路径时src/components/Second.vue

2.在router文件夹中的index.js文件中引入'Vue'和'Router'

import Vue from 'vue'
import Router from 'vue-router'

3.在router文件夹中的index.js文件中引入上述两个组件：

import Home from 'src/components/Home'
import First from 'src/components/First'
import Second from 'src/components/Second'

4.在router文件夹中的index.js文件中使用Router：

Vue.use(Router)

5.在router文件夹中的index.js文件中创建Router实例：

export default new Router({
  routes: [//建立路由
    {
      path: '/home',      //路由路径
      name: 'HomeName',   //路由名称
      component: Home,    //路由组件
      children: [          //子路由
        {
          path: '/first',
          name: 'First',
          component: First
        },
        {
          path: '/second',
          name: 'Second',
          component: Second
        }
      ]
    }
  ]
})

6.在main.js中：

import router from 'src/router'

并在Vue实例中：

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App}
})

7.使用v-link指令,点击就会跳转到该路由所对应的的组件。

<div class="list-group">
	<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
</div>

8.使用<router-view>标签（）

<router-view></router-view>

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。即组件会显示在此标签所在的位置。

9.在script标签中，通过router.push()实现路径切换（导航）

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