npm install vue-router --save-dev

import Vue from 'vue'//導(dǎo)入vue的語(yǔ)法
import VueRouter from 'vue-router'//導(dǎo)入vue-router
import Content from "../components/Content";//導(dǎo)入創(chuàng)建的組件
import Main from "../components/Main";
//安裝路由
Vue.use(VueRouter);//通過(guò)此語(yǔ)句使導(dǎo)入的VueRouter路由生效
 
//配置導(dǎo)出路由，注意VueRouter名要一致
export default new VueRouter({
  routes:[{
    //路由路徑 @RequestMapping相似
    path: '/content',
    //名字
    name:'content',
    //跳轉(zhuǎn)的組件
    component:Content
    //以上語(yǔ)句說(shuō)明，當(dāng)我們?cè)L問(wèn)到'/content'路由時(shí)，就會(huì)跳轉(zhuǎn)到Content組件，顯示該vue頁(yè)面
  },{
    //路由路徑
    path: '/main',
    //名字
    name:'main',
    //跳轉(zhuǎn)的組件
    component:Main
  }
  ]
})

import Vue from 'vue'
import App from './App'
//文件在當(dāng)前目錄下的router下，自動(dòng)掃秒里面的路由配置
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  //配置路由，以便全局使用
  router,
  components:{App},
  template:'<App/>'
})

<template>
  <div id="app">
    <h1>Vue-Router</h1>
<!--  控制路由  -->
    <router-link to="/main">首頁(yè)</router-link>
    <router-link to="/content">內(nèi)容頁(yè)</router-link>
<!--  控制頁(yè)面展示  -->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>