6.10

接昨天的 补充代码

DetailView.vue

<template>

    <div>

      <div v-html="text"></div>

    </div>

  </template>

 

  <script>

  export default {

    data() {

      return {

        text: ''

      };

    },

    mounted() {

      this.text = this.$route.params.text;

    }

  }

  </script>

<template>

  <div id="app">

    <nav>

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link>

    </nav>

    <router-view/>

  </div>

</template>

App.vue

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

nav {

  padding: 30px;

}

nav a {

  font-weight: bold;

  color: #2c3e50;

}

nav a.router-link-exact-active {

  color: #42b983;

}

</style>