vue-router—2hash和history模式

约定不等于承诺〃 2022-01-21 09:29 214阅读 0赞

开始一个应用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

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">
        
        <div class="nav-box">
          <ul class="nav">
            <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></router-view>
      </div>
    </template>

看一下界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220121/842ff320504d415896be692121108c97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220121/d303a6d5a8034fe9bab2b426f6830ec7.png