好程序员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({