1 與

路由跳轉<router-link>(或this.$router.push)與<router-view>在同一個vue裡
vue是單頁面應用,所有頁面都在app.vue裡
在app.vue裡有<router-link><router-view>可以接受home元件
在home.vue裡又有<router-link><router-view>

雖然叫路由跳轉,在位址列url也變化了,但其實沒有跳到其他頁面.
路由跳轉是沿用以前多頁面的叫法,在單頁面應用中,其實是將其他頁面載入到當前頁面中,或者叫路由引用更為合適.
 

2 內建component

使用:is屬性,動態渲染元件。
<component :is='state'></component>

示例:
<div id="app">
  <button @click="change1">son1</button>
  <button @click="change2">son2</button>
  <component :is='state'></component>
</div>
 
<script>
 var vm = new Vue({
    el: "#app",
    data() {
        return {
            state: 'son1'
        }
    },
    methods: {
        change1() {
            this.state = 'son1'
        },
        change2() {
            this.state = 'son2'
        }
    },
    components: {
        son1,
        son2
    }
 })
</script>