VUE的hash路由模式

router-view标签就是确定路由位置的 一般放置在APP.vue文件里

路由位置

vue-router

路由模式分为三种 hash history abstract

hash路由就是: 跳转的位置是#加上后面的字符

类似于

可以通过控制台location.hash查看当前hash是多少

** 路由的使用**

在App中设置

<!-- 用于存放路径的组件-->
<router-view></router-view>

然后在router/index.js 中添加需要的VUE模板页面

import Vue from 'vue'
import Router from 'vue-router'
import LandingPage from "../components/LandingPage";
import index from "vuex";
import VueRouter from "vue-router";

//注册插件作为VUE的属性
Vue.use(Router,VueRouter)

export default new Router({
  mode: 'hash',
  routes: [ //前端路由 配置的地方
    {
      path: '/',                //访问跳转地址
      name: 'landing-page',     //名字
      component: LandingPage    //实际文件地址
    },{
      path: '/index',
      name: 'index',
      component: ()=> import('../components/LandingPage/index')
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

设置主页面LandingPage.vue

<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-row>
          <el-button type="primary" round @click="navRouter()">左边看美女</el-button>
          <el-button disabled >这是主页面</el-button>
          <el-button type="primary" round @click="systemRouter()">右边有迪迦</el-button>
        </el-row>
      </el-header>
      <el-main>

      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    navRouter() {
      this.$router.push("/index")
    },
    systemRouter(){
      this.$router.push("/system")
    }
  }
}
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 850px;
}
</style>

在LandingPage/index.vue中设置返回

<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-row>
          <el-button >左边看美女</el-button>
          <el-button type="primary" round @click="navRouter()" >这是主页面</el-button>
          <el-button type="primary" round @click="systemRouter()">右边有迪迦</el-button>
        </el-row>
      </el-header>
      <el-main>
        <P>这里是美女</P>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    navRouter() {
      this.$router.push("/")
    },
    systemRouter(){
      this.$router.push("/system")
    }
  }
}
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main{
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 850px;
}
</style>

基本实现跳转

可以实现来回跳转

emm 基于electron VUE 和elementui的路由跳转页面就完成了

(img-SECh62fA-1607479301124)]

[外链图片转存中…(img-NE2jylM6-1607479301125)]

可以实现来回跳转

emm 基于electron VUE 和elementui的路由跳转页面就完成了

[外链图片转存中…(img-kBTjQIQy-1607479301127)]

通过控制台看出来这是hash的跳转 另外两种 后面有时间再学习