第4章 Vue全家桶(vue-router+vuex) - 4.3 命名路由 动态路由 静态路由

App.vue代码：

// App.vue里面的内容
 
<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- router_link相当于a标签，to属性相当于a标签的href -->
 
      <!-- <router-link to="/">Home</router-link> | 这是静态路由
      <router-link to="/about">About</router-link> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link>
       
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>
 
<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>