Vue 编程式导航，路由history模式

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

import Home from './components/Home.vue'
import News from './components/News.vue'

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

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News,name:'newss' },
  { path: '*', redirect: '/home' }
]

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

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

<template>
    <div id="home">
        我是Home组件
        <button @click="TiaoZhuan()">跳转到News【path】</button>
        <button @click="TiaoZhuanName()">跳转到News【name】</button>
    </div>
</template>

<script>
    export default{
        methods:{
            TiaoZhuan(){
                this.$router.push({path:'news'})
            },
            TiaoZhuanName(){
                this.$router.push({name:'newss'})
            }
        }
    }
</script>

<template>
    <div id="news">
        我是News组件
    </div>
</template>