| | |
|---|
| | | <template> |
|---|
| | | <div id="nav"> |
|---|
| | | <router-link to="/">Home</router-link> | |
|---|
| | | <router-link to="/about">About</router-link> |
|---|
| | | </div> |
|---|
| | | <router-view /> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style lang="less"> |
|---|
| | | #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; |
|---|
| | | |
|---|
| | | a { |
|---|
| | | font-weight: bold; |
|---|
| | | color: #2c3e50; |
|---|
| | | |
|---|
| | | &.router-link-exact-active { |
|---|
| | | color: #42b983; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | //import引入的组件需要注入到对象中才能使用 |
|---|
| | | components: {}, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="less" scoped> |
|---|
| | | //@import url(); 引入公共css类 |
|---|
| | | </style> |
|---|
