vue-router—2hash和history模式

开始一个应用

router/index.js

此项目使用的是history模式

import Vue from 'vue'
import VueRouter from "vue-router";


// 作为vue的插件
Vue.use(VueRouter)
import home from "@/components/home";
import about from "@/components/about";
import document from "@/components/document";


let router = new VueRouter({
    mode: 'history', //如果删掉这一行，那就是hash模式，hash模式会给地址栏加一个#
    routes: [
        {
            path: '/home',
            component: home
        },{
            path: '/about',
            component: about
        },{
            path: '/document',
            component: document
        }
    ]
});
export default router;

App.vue

   使用router-link会兼容两种模式<router-link to="/home">home</router-link>

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <div class="nav-box">
      <ul class="nav">
        <li>
          <router-link to="/home">home</router-link>
          <!-- <a href="/home">home</a> -->
        </li>
        <li>
          <router-link to="/document">document</router-link>
          <!-- <a href="/document">document</a> -->
        </li>
        <li>
          <router-link to="/about">about</router-link>
          <!-- <a href="/about">about</a> -->
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

 

看一下界面