前端开发之vue-router路由设置

1.理解
1.1. 说明
1) 官方提供的用来实现 SPA 的 vue 插件
2) github:https://github.com/vuejs/vue-router
3) 中文文档：http://router.vuejs.org/zh-cn/
4) 下载:npminstallvue-router–save
1.2. 相关 API 说明
1) VueRouter(): 用于创建路由器的构建函数
newVueRouter({
// 多个配置项
})
2) 路由配置
routes:[
{// 一般路由
path:‘/about’,
component:About
},
{// 自动跳转路由
path:‘/’,
redirect:‘/about’
}
]
3) 注册路由器
importrouterfrom‘./router’
newVue({
router
})
4) 使用路由组件标签
1.： 用来生成路由链接
GotoXXX
2.： 用来显示当前路由组件界面

2.基本路由
2.1. 效果
基本路由.gif
2.2. 路由组件
Home.vue
About.vue
2.3. 应用组件:App.vue

About
Home

2.4. 路由器模块:src/router/index.js
exportdefaultnewVueRouter({
routes:[
path:’/’,
redirect:’/about’
},
path:’/about’,
component:About
},
path:’/home’,
component:Home

2.5. 注册路由器:main.js
importVuefrom’vue’
importrouterfrom’./router’
// 创建 vue 配置路由器
newVue({
el:’#app’,
router,
render:h=>h(app)
2.6. 优化路由器配置
linkActiveClass:’active’,// 指定选中的路由链接的 class
2.7. 总结: 编写使用路由的 3 步
1) 定义路由组件
2) 注册路由
3) 使用路由