vue-router

第一部分：

安装vue-router

npm install vue-router --save -dev

cnpm install vue-router --save -dev

yarn add vue-router

如果在安装vue-cli的时候，已经选择了vue-router，就不需要在单独安装了

第二部分：

解读router/index.js文件

import Vue from 'vue' //引入vue

import Router from 'vue-router' // 引入vue-router

import Home from '@components/home' //引入根文件下的vue文件

Vue.use(Router) //vue全局使用vue-router

export defalut new Router { //全局到处

routers: [     //配置路由，这里是个数组

        {         //每一个链接（路由）都是一个单独的对象

            path:'/', //链接（路由）路径 这个‘/’代表首页

            name:'Home', // 路由名称

            component:Home // 对应的路由模板

        }

    ]

}

第三部分：

使用方法

我们在router/index.js文件中引入了vue文件的路径，并且完成了路由的配置，那么在此vue文件中，完整步骤，如下操作：

// hello.vue文件

<template>

<div class="hello">

<h1>{{ msg }}</h1>

</div>

</template>

<script>

export default {

name: 'hi',

data () {

return {

  msg: 'Hi, I am JSPang'

}

}

}

</script>

<style scoped>

</style>

// router/index.js文件

import Hello from '@/components/hello.vue'

// 同时新增一个单独的路由对象

{

path:'/hello',

name:'Hello',

component:Hello

}

第四部分：

展示整体，router/index.js文件代码

import Vue from 'vue' //引入Vue

import Router from 'vue-router' //引入vue-router

import Hello from '@/components/hello' //引入根目录下的Hello.vue组件

import Home from '@/components/home'

Vue.use(Router) //Vue全局使用Router

export default new Router({

routers: [ //配置路由，这里是个数组

{     //每一个链接（路由）都是一个单独的对象

        path:'/',     //链接（路由）路径 这个‘/’代表首页

        name:'Home',     // 路由名称

        component:Home     // 对应的路由模板

    },

    {

        path:'/hello',

        name:'Hello',

        component:Hello

    }

]

})