头条VUE代码

main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router/index'

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../page/Home.vue'

import Detail from '../page/Detail.vue'

Vue.use(VueRouter)

let router = new VueRouter({

routes:[

    {

        path:'/',

        component:Home

    },

    {

        path:'/detail/:id',

        props:true,

        component:Detail

    }

]

})

export default router

APP.vue

<template>

  <div id="app">

   <router-view></router-view>

  </div>

</template>

<script>

 

export default {

  name: 'App',

  components: {

   

  }

}

</script>

<style>

*{

    margin: 0;

    padding: 0;

    list-style: none;

    text-decoration: none;

    outline: none;

}

.flex{

  display: flex;

}

.j-c{

  justify-content: center;

}

.j-s{

  justify-content: space-betw