说明

    Vue Router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得灵活。

    包含的功能：

        * 嵌套的路由/视图表

        * 模块化的、基于组件的路由配置

        * 路由参数、查询等。。。

 安装vue-router

     vue-router 是一个插件包，所以也用npm/cnpm来安装，打开cmd，进入项目目录，输入命令：     （npm install vue-router安装   --save-dev 保存到dev配置里）

npm install vue-router --save-dev

引入vue-router

    安装成功后，在main.js中导入vue-router：

import VueRouter from 'vue-router'

显示声明使用VueRouter

Vue.use(VueRouter)

使用vue-router 实现页面跳转

新建一个Vue页面

内容页

新建一个router文件夹：新建router的主配置文件index.js

路由配置文件

导入核心文件：vue 和 vue-router

import Vue from 'vue'

import Router from 'vue-router'

安装使用路由：

Vue.use(Router)；

配置导出路由：

import Content  from '../components/Content' //引入组件

export default new Router({

routers:[{

//路由路径

path:'/content',

component: Content   //跳转的组件

}]

})

入口main.js修改路由引入router配置文件：

引入路由配置文件

实现跳转

在页面中使用<router-link to='/content'>标签实现路由跳转 to属性实现路由跳转 

<router-view></router-view>   路由组件展示

跳转首页页面展示

详情页展示

OK，vue-router路由跳转完成！