1 路由配置main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Page1 from "./components/new/page1.vue";
import Page2 from "./components/new/page2.vue";
import News from "./components/news.vue";

const routes = [
  {path:'/news',component:News,
  children:[
    {path:'p1',component:Page1},
    {path:'p2',component:Page2}
  ]
},
  {path:'*',redirect:'/news'}
]

const router = new VueRouter({
  mode:'history',
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

2 App.vue

<template>
  <div id="app">
    <router-link to="/news" >news</router-link>
    <br><hr>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },methods:{
  }
}
</script>

3 news.vue

<template>
    <div>
        <h2>
            {{msg}}
        </h2>
        <br><hr>
        <router-link to="/news/p1">page1</router-link>
        <router-link to="/news/p2">page2</router-link>
        <br><hr>
        <router-view></router-view>

    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'this is content in  news component',
        }
    }
}
</script>

4 page1.vue

<template>
    <div>
        <h2>
            {{msg}}
        </h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am msg from page1 component'
        }
    }
}
</script>