在vue-cli脚手架中使用vue-router

在vue-cli脚手架中使用vue-router

不要忘记安装vue-router

1, 在src 目录下新建两个组件，home.vue 和 about.vue

<template>
    <div>
        <h1>home</h1>
        <p>{
   {
   msg}}</p>
    </div>
</template>
<script>
    export default {
   
        data () {
   
            return {
   
                msg: "我是home 组件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>about</h1>
        <p>{
   {
   aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
   
        data () {
   
            return {
   
                aboutMsg: '我是about组件'
            }
        }
    }
</script>

2, 在 App.vue中 定义 和

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<</