vue-router 学习笔记

https://router.vuejs.org/zh/guide/

1、路由

       在vue-router中, 定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link  to="/home">Home</router-link>。

       vue-cli 创建项目，安装vue-router，在components目录下新建两个组件，Home.vue 和 About.vue。

/******************************************Home.vue*************************************/

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

/****************************************About.vue**********************************/

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

在 App.vue中 定义<router-link > 和 </router-view>  

/************************************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&g