VUE 路由及组件使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Servenity/article/details/78863264

一、组件

在src里面components文件夹下面新建一个你需要的组件，例如navs这样一个组件。在navs.vue里面写你的结构样式等内容封装一个导航的模块；

然后在需要你入的文件里面引入，例如app.vue下面

<script>
import navs from './components/navs/navs';
export default {
  name: 'app',
  components:{
    navs
  }
}
</script>

这样定义完后，看你哪个版块需要就在那个版块写一下<navs></navs>就可以成功的引入你的新定义的组件了

二、路由

在src里面有一个router的文件夹，里面有个index.js文件，接下来把你需要链接跳转的版块在index.js里面引入；

import score from'@/components/competition/score'
export default new Router({
  routes: [
    {
      path: '/score',
      name: '',
      component: score
    }
  ]
})

html 导航里面你就可以直接用
<router-link to="/score">列表 </router-link>