1.实现简易前端路由

模块化中 is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置
可以把 component 标签当做是【组件的占位符】

// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {

// 通过 location.hash 获取到最新的 hash 值 }

2. vue-router的基本使用

引入相关的库文件

在这里插入图片描述

2. 添加路由链接

.3 添加路由填充位

4. 定义路由组件

5. 配置路由规则并创建路由实例在这里插入图片描述

6. 把路由挂载到 Vue 根实例中

示例

  
     
     
     Document  
         
     
       
    
     User
        
    
     Register

3.路由重定向

在这里插入图片描述

4. vue-router嵌套路由

5.vue-router动态路由匹配

5.1 动态匹配路由的基本用法

在这里插入图片描述

5.2 路由组件传递参数

5.2.1 props的值为布尔类型

在这里插入图片描述

5.2.2.props的值为对象类型

在这里插入图片描述

5.2.3.props的值为函数类型

在这里插入图片描述

6. vue-router命名路由

在这里插入图片描述

转载地址：http://jwmzi.baihongyu.com/

你可能感兴趣的文章