Vue 路由的两种模式 history 和 hash，以及命名路由

迷南。 2022-12-31 02:28 183阅读 0赞

*对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变试图的同时不会向后端发出请求*。  
**hash模式：** 有 /\#/ 号的URL 为hash模式，hash符号之前的内容会被包含在请求中，hash之后的并不会包含于请求中，例如 www.baidu.com/\#/name 请求的时候只会请求www.baidu.com；

hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个\#xx触发这个事件。

window.onhashchange = function(event){ 
        console.log(event);
      }

event 里面有两个属性newURL和oldURL。可以通过模拟改变hsh的值，动态页面数据。

**history模式：** 前端的URL必须和实际向后端发起请求的URL一致，如htttp://www.baidu.com/book/id。如果后端缺少对/book/id 的路由处理，将返回404错误;

history模式主要使用HTML5的 pushState() 和 replaceState() 这两个api来实现的, pushState() 可以改变url地址且不会发送请求, replaceState() 可以读取历史记录栈,还可以对浏览器记录进行修改；

window.history.pushState(stateObject, title, URL)
    window.history.replaceState(stateObject, title, URL)

// 包括back,forward , go 三个方法
    history.go(-2);//后退两次
    history.go(2);//前进两次
    history.back(); //后退
    hsitory.forward(); //前进

**将默认的hash模式改为 history 模式：**

export default new VueRouter({ 
        linkActiveClass: 'mui-active',
        mode: 'history',  （默认为hash 模式）
        routes:[{ path:'/',redirect:{ name:'home'}},
            { name:'home',path:'/home',component:homeVue},
            { name:'vip',path:'/vip',component:vipVue},
            { name:'search',path:'/search',component:searchVue},
            { name:'cart',path:'/users/cart',component:cartVue}]
    })

**命名路由：**

命名路由就是在路由里面添加 name 属性：

export default new VueRouter({ 
        routes:[{ path:'/',redirect:{ name:'home'}},
            { name:'home',path:'/aa-home',component:homeVue}]
    })

原本的路由跳转是根据path 来进行跳转：

<router-link to="/aa-home"></router-link>

但是更改了命名路以后就可以根据那么来进行了：

<router-link :to="{ name:'home'}"></router-link>