js实现路由hash和history模式

JavaScript025

js实现路由hash和history模式,第1张

hash模式是监听 hashchange 事件来实现的。

hash是监听 popstate 事件来实现的，但有点小问题需要处理一下。

history.replaceState 和 history.pushSstate 不触发 popstate 事件，这个问题可以自定义一个方法来实现。

（1）监听地址栏的变化

（2）根据地址栏的变化切换到对应的组件

1、创建一个vue项目：vue create routerdemo

注意：在选择插件的时候只选择babel

2、安装路由插件：npm install vue-router

3、创建路由：src下新建router.js，抛出router实例

import Vue from "vue"

// 引入vueimport Router from "vue-router"

// 引入vue-routerVue.use(Router)

// 使用路由import Recommend from "./Recommend.vue"

// 引入Recommend

组件import Singer from "./Singer.vue"

// 引入Singer组件const router=newRouter({// 实例化router对象mode:"hash",

// 使用hash路由，带#号routes:[

// 路由的配置项{path:"/recommend",component:Recommend},

// recommend路径对应Recommend组件{path:"/singer",component:Singer},

// singer路径对应Singer组件    ]

})

export defaultrouter// 抛出路由

4、使用路由：js的入口文件main.js中引入并使用

 5、在根组件App.vue中  router-view  开辟一块空间：

 6、地址栏后面输入路径显示对应的组件：

插一句：3002的端口号是在vue.config.js中配置的：

module.exports={

    devServer:{

        port:3002  }

}

7、router-link标签，点击跳转

        <router-link to="/recommend" tag="div" activeClass="active">推荐</router-link>

        <router-link to="/singer" tag="div" activeClass="active">歌手</router-link>

        to：跳往的路径

        tag：要渲染成的标签，默认是a标签

        activeClass：当前标签添加类名

是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的

hash路由 默认的是hash路由

history路由

通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash

通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的

由hash路由设置成history路由，给路由添加配置项 mode="history"

1、设置相应组件

2、在router->index.js文件中添加配置

首先引入组件，然后配置规则 {path:设置路径，name:名，component:组件}

3、在需要现在组件的地方给页面添加<router-view></router-view>

4、设置导航路径

使用vue提供 <router-link to="路径"></router-link>默认的解析成a标签

5、设置默认路由

6、设置导航样式

1、需要定义组件

2、确定好在那个组件配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则

3、在需要配置二级路由的组件中添加router-view

4、设置导航 <router-link to="/ / ">

5、设置导航链接的样式

我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们在配置一个一级路由就好了！！！