路由
修改URL,页面不发生刷新
- URL的hash
- HTML5的history模式:pushState
- HTML5的history模式:replaceState
history.go(-1)= history.back()
vue-router安装及配置
//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'
//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
const router = new VueRouter({
//配置路由和组件之间的应用关系
routes:routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
//3.将router对象传入到Vue实例
export default router
使用步骤
- 创建router实例
- 挂载到Vue实例中
- 创建路由组件
- 配置组件和路径的映射关系
- 使用路由
路由的默认路径
router-link
路由代码跳转
动态路由
路由懒加载
路由的嵌套
参数传递
导航守卫
keep-alive
属性