VUE

Vue 动态组件路由

Posted Cola🌀
Vue做画面跳转，可以通过Router方式。

App .vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import login from "./components/Login";

router->index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '',
      component: Login
    }
  ]

})
这样做的缺点是在浏览器的地址栏，会随着path的改变而改变，比如有可能像下面这样。

这个时候，我们可以使用组件替换方式，切换view。

App.vue

<template>
  <div id="app">
    <component :is="currentView" @routerView="routerView"></component>
  </div>
</template>

<script>
import login from "./components/Login";
import test from "./components/Test";
export default {
  name: "App",
  data() {
    return {
      currentView: login,
    };
  },
  components: {
    login,
  },
  methods: {
    routerView(viewName) {
      switch (viewName) {
        case "login":
          this.currentView = login;
          break;
        case "test":
          this.currentView = test;
          break;
      }
    },
  },
};
</script>

Login.vue

<template>
  <div class="hello">
    <button @click="handleClick(test)">test</button>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
  },

  methods: {
    handleClick(test) {
      // 通过emit触发父组件方法， 并传递参数。
      this.$emit("routerView", test);
    },
  },
};
</script>

Test.vue

<template>
  <div class="hello">
    <h2>test</h2>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
    }
  }
}
</script>

画面跳转以后，会发现浏览器地址栏始终是http://localhost:8080/