Web前端干货详解Vue-Router路由与配置

好程序员Web前端干货详解Vue-Router路由与配置，现在的很多应用都流行SPA应用（singe page application) 。传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。而在vue2.0版本后，vue官方推出vue-router插件来实现单页面的路由跳转，内部原理就是通过组件之间的切换（组件的卸载与安装）去实现整个页面无刷新的效果。

一．项目引入路由并配置：

1.在vue项目中，通过cnpm或者yarn的方式进行vue-router的安装

cnpm i vue-router -S

yarn add vue-router -S

       2.接下来需要在入口文件main.js里面进行路由的引入与注册

        import Vue from 'vue'

        import Router from 'vue-router'

        Vue.use(Router)

3. 创建router路由器

    new Router({

      routes:[

        {path:"",component:}

      ]

    })

4. 创建路由表并配置在路由器中

    var routes = [

//path为路径，component为路径对应的路由组件

        {path,component}

    ]

    new Router({