//router/index.js
export const constantRouterMap=[
  {
   path: '/',
   // name: 'HelloWorld',
   component: HelloWorld
  }
 ]
Vue.use(Router)
export default new Router({
 routes: constantRouterMap
})

//點(diǎn)擊跳轉(zhuǎn)
<template>
 <div>
  點(diǎn)擊新增 動(dòng)態(tài)路由: "secondRouter"
  <br/>
  <el-button @click="srouter" type="primary">新增動(dòng)態(tài)路由</el-button>

 </div>
</template>

<script>
import router from 'vue-router'
import {constantRouterMap} from '@/router'


export default {
 name: 'kk',
 mounted(){
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
  srouter(){
   let newRoutes=constantRouterMap.concat([{path:'/secondRouter',
    component :resolve => require(["@/components/kk"], resolve )
   }])
   this.$router.addRoutes(newRoutes)
   this.$router.push({path:'/secondRouter'})
  }
 }
}
</script>

//跳轉(zhuǎn)過去的component組件,xxx.vue
<template>
 <div class="secondRoute">
  恭喜你，動(dòng)態(tài)添加路由成功，瀏覽器的鏈接已經(jīng)變化；

  <h3>無論你怎么刷新我都會(huì)留在當(dāng)前頁(yè)面</h3>
  <h3>并且點(diǎn)擊瀏覽器回退鍵，我會(huì)跳到之前頁(yè)面,不會(huì)循環(huán)</h3>

 </div>
</template>

<script>
import router2 from '@/router'
import router from 'vue-router'
export default {
 name: 'HelloWorld',
 mounted(){
   localStorage.setItem('new',JSON.stringify({'path':'/secondRouter','component':'kk'}))//保存路由
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
 }
}
</script>

import router from './router'
import { constantRouterMap } from '@/router' //router里的固定路由
router.beforeEach((to, from, next) => {
 if (localStorage.getItem('new')) {
  var c = JSON.parse(localStorage.getItem('new')),
  lastUrl=getLastUrl(window.location.href,'/');

  if (c.path==lastUrl) { //動(dòng)態(tài)路由頁(yè)面的刷新事件
   let newRoutes = constantRouterMap.concat([{
    path: c.path,
    component: resolve => require(["@/components/" + c.component + ""], resolve)
   }])
   localStorage.removeItem('new')
   router.addRoutes(newRoutes)
   router.replace(c.path) //replace,保證瀏覽器回退的時(shí)候能直接返回到上個(gè)頁(yè)面，不會(huì)疊加

  } 
 } 
 next()

})

var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到瀏覽器出現(xiàn)網(wǎng)址的最后"/"出現(xiàn)的后邊的字符

export const constantRouterMap = [{
  path: '/',
  component: HelloWorld
 }, 
 {//404
  path: '/404',
  component: ErrPage
 },
 { //重定向到404
   path: '*', redirect: '/404' }
]