0
点赞
收藏
分享

微信扫一扫

Vue.js笔记6(vue-router)

小a草 2022-02-08 阅读 52

路由

修改URL,页面不发生刷新

  1. URL的hash
    在这里插入图片描述
  2. HTML5的history模式:pushState
    在这里插入图片描述
  3. 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

在这里插入图片描述
在这里插入图片描述
使用步骤
在这里插入图片描述

  1. 创建router实例
    在这里插入图片描述
    在这里插入图片描述
  2. 挂载到Vue实例中
    在这里插入图片描述
  3. 创建路由组件
    在这里插入图片描述
  4. 配置组件和路径的映射关系
    在这里插入图片描述
  5. 使用路由
    在这里插入图片描述

路由的默认路径

在这里插入图片描述
在这里插入图片描述

router-link

路由代码跳转

动态路由

路由懒加载

路由的嵌套

参数传递

导航守卫

keep-alive

属性
在这里插入图片描述

举报

相关推荐

0 条评论