17. The navigation programming (js Jump drive) mode and the hash and route History Mode

Programmatic navigation

Compared with the navigation router-link, router-link similar to a label, corresponding to programmed navigation ajax, page jump navigation

Home.vue

< Template > 
    < div > 
        < H2 > {{MSG}} </ H2 > 
        < br > 
        < Button @click = "goNew ()" > by a jump to the news page js </ Button > 
        < br > 
    </ div > 
</ Template > 
< Script > 

Export default { 
  name: ' Home ' ,   
  Data () { 
    return { 
        MSG: 'Home Components '
    }
  },
  methods:{
      goNew(){
        //   this.$router.push({path:'news'})
          this.$router.push({path:'vcontent/0'})
      }

  },
  components:{
  }
}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

History mode and hash mode

Adding main.js in:

mode: 'history', // hash to history mode

 

 main.js

Vue from Import 'VUE' ; 
Import from the App './App.vue' ; 

Import VueResource from 'Resource-VUE' ; 
Vue.use (VueResource) 


Import VueRouter from 'VUE-Router' ; 
Vue.use (VueRouter) 

// 1. Create assembly, import component 
import from Home './components/Home.vue' ; 
import from News ' ./components/News.vue ' ; 
import vContent from ' ./components/vContent.vue ' ; 

import from Good ' ./components/Goods.vue ' ; 

// 2. configure routing 
const routes = [ 
  　　{path: ' / Home ' ,component:Home},
  　　{path:'/news', Component: News}, 

      {path: '/ vcontent /: AID', Component: vContent}, // Dynamic Routing 

      {path: '*', the redirect: '/ Home'}, // default route goto 

      { path: '/ Goods' , Component: Good}, 
] 
// note that this is routes, rather than Routers 

// 3. examples of VueRouter 
const = Router new new VueRouter ({ 
      MODE: 'history', // the hash to history mode 
  　　routes // (abbreviation) corresponds Routers: Routers 
}) 

// 4. mount 
new new Vue ({ 
  EL: '#app' , 
  Router,
  the render: H => H (the App) 
}) 

// 5. The The <router-view> </ router -view> placed inside App.vue