vue2+vueRouter2+webpack+jsonp（三）调整App.vue并配置路由

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

如果你按我上面的文件目录修改的话，此刻你的项目应该是跑不起来的，那我们来改点东西。

1.修改App.vue

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

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

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

删除原有的代码，将上面这段代码粘贴进去。此处style中lang=“less”说明本项目是采用less写样式的，如果你用的 scss，此处就要改成lang=“scss”。所有的样式都在src/style/style.less中，所以此处直接引用./style/style\

2.安装less，在终端执行

npm install less-loader -d  --save-dev
npm install node-less -d  --save-dev
npm install less -d  --save-dev

1. -d是查看详情
2. –save-dev是指将包信息添加到devDependencies，表示你开发时依赖的包裹。

3. –save是指将包信息添加到dependencies，表示你发布时依赖的包裹。

   这会你的项目是可以跑起来的。

3.配置路由

• 在index.vue页面中

  <template>
    <div>
      index
    </div>
  </template>

• 在content.vue页面中

  <template>
    <div>
      content
    </div>
  </template>

• 修改router中的index.js文件

  import Vue from 'vue'
  import Router from 'vue-router'
  import Content from '@/page/content'
  import Index from '@/page/index'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        component: Index
      },
      {
        path: '/content/:id',
        component: Content
      }
    ]
  })
  

  项目跑起来以后，你会在页面看到如下图的样子
  
  
  此刻，估计你的心里是有疑问的，为啥content页配置路由的时候要写成/content/:id,这个id是干嘛的？？？
  因为我们为了区分若干条内容信息，就是根据id来进行区分的，所以，这里使用了动态路由匹配