vue+vue-router+axios+element-ui构建vue实战项目之四（修改App.vue、router和page文件）

在上一篇《vue+vue-router+axios+element-ui构建vue实战项目之三（解读项目文件）》中，我们认识了项目中各文件夹和文件的作用，并且重新整理了一下，如果忘记了的朋友，不妨再去看一下。

那么这篇文章，我们就来修改下项目中的App.vue和router文件的内容，让项目能够重新运行起来。

修改App.vue文件

先把默认的代码删掉部分，改成这样：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

样式引用src/style/style.scss文件，因此在App.vue文件中，按照这样@import "./style/style"引用。

<style lang="scss">表示可以编写或导入scss、sass、css文件。

引用scss文件时，可以省略.scss后缀。

更多关于sass的内容，可以学习阮一峰的《SASS用法指南》。

既然，我们引入了scss文件，就需要能够编译的工具，接下来我们需要下载两个包工具，在终端输入：

npm install -D node-sass sass-loader

由于网络原因，我使用了cnpm下载：

修改router文件

目前，修改工作只进行了一部分，现在npm run dev是运行不了项目的，还需要我们修改router/index.js路由文件

这是修改之前的代码：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

根据我们目前的目录，代码修改如下：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/page/index'
import content from '@/page/content'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '首页',     //path别名，可删除
      meta:{
        title: '首页'   //设置页面title
      },
      component: index
    },
    {
      path: '/content/:id',
      name: '详情',
      meta:{
        title: '详情'
      },
      component: content
    }
  ]
})

path：‘/’ 就是默认首页，也就是index页面。

这里'/content/:id'，我们这里使用了动态路由匹配， :id 就是各内容页面的ID， 例如‘/content/10’、‘/content/20’这种。

更多关于动态路由的知识，可以参阅官方文档《动态路由匹配》。

好了，路由配置也完成了，接下来只剩最后一步，给页面添加内容了。

index.vue和content.vue文件添加内容

index.vue文件：

<template>
    <div>index page</div>
</template>
<script>
    export default {

    }
</script>
<style lang='scss'>
    @import '..style/style'
</style>

content.vue文件：

<template>
    <div>content page</div>
</template>
<script>
    export default {

    }
</script>
<style lang='scss'>
    @import '..style/style'
</style>

好了，简单的页面内容有了，具体的内容后续再添加。

现在我们在终端输入：

npm run dev

短暂的编译成功后，终端显示：

在浏览器输入 http://localhost:8080，我们看到的内容：

接着我们输入 http://localhost:8080/#/content/10，如下：

 

OK，基本的配置完成，下一节我们将学习如何在项目中配置Axios。

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！