vue路由(vue-router)hash和history模式

责编:menVScode 2017-11-30 17:44 阅读(1707)

hash模式

        http://localhost:8080/#/http://localhost:8080/#/home

        src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '@/components/Home'
import About from '@/components/About'
import Document from '@/components/Document'

let router = new VueRouter({
  routes:[
    { path:'/home',component:Home },
    { path:'/about',component:About },
    { path:'/document',component:Document }
  ]
})

export default router

        Vue.app

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li><a href="#/home">home</a></li>
        <li><a href="#/document">document</a></li>
        <li><a href="#/about">about</a></li>
      </ul>
    </div>
    <router-view/>
  </div>
</template>


history模式

        http://localhost:8080/http://localhost:8080/about

        src/router/index.js

        增加 mode : ' history ',默认是hash模式

....
let router = new VueRouter({
  mode:'history',//默认是hash模式
  routes:[
    ...
  ]
})

        Vue.app

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li><a href="/home">home</a></li>
        <li><a href="/document">document</a></li>
        <li><a href="/about">about</a></li>
      </ul>
    </div>
    <router-view/>
  </div>
</template>

        此时,点击导航链接的时候,页面刷新加载,达不到单页面的效果。这是由于a标签的默认行为,要去掉这些默认行为。解决方法是使用 router-link 标签,然后自动会编译成a标签。如下修改:

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li><router-link to="/home">home</router-link></li>
        <li><router-link to="/document">document</router-link></li>
        <li><router-link to="/about">about</router-link></li>
      </ul>
    </div>
    <router-view/>
  </div>
</template>

        实际上在大多数开发过程中是使用history模式;低版本的时候,使用hash模式;高版本的时候,支持html5一些api,使用history模式。

        使用history模式好处:在链接地址切换的时候,在浏览器历史记录中回保存历史链接,然后就能使用前进/后退功能。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码