Vue navigation route programming mode and hash

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


// to introduce public scss Note: When creating a project must scss 

'./assets/css/basic.scss' Import;    




// request data 


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




Import VueRouter from 'VUE-Router'; 

Vue.use (VueRouter); 

.. 1 // Create assembly 


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

Import from News './components/News.vue'; 

Import from the Content './components/Content.vue'; 



// configure routing Note 2: name 

const routes = [ 
  {path: '/ Home', Component: } Home, 
  {path: '/ News', Component: News, name: 'News'}, 

  {path: '/ Content /: AID', Component: the Content},/ * Dynamic routing * /

  {Path: '*', redirect : '/ home'} / * default route skip * / 
] 


// NOTE 3 instantiated VueRouter: Name 

const = new new Router VueRouter ({ 
  MODE: 'History', / * the hash mode * to History / 
  routes // (abbreviation) corresponds routes: routes 
}) 




//. 4, the routing mount 

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


/ /. 5 < Router-View > </ Router-View > on App.vue

< Template > 
    <-! All content to be the root contains up -> 
    < div the above mentioned id = "Home" >     
       I am a home component 


        < the Button @click = "goNews ()" > by js jump to the news page < / Button > 
       
    </ div > 
</ Template > 


< Script > 
    Export default { 
        Data () { 
            return {                
               MSG: ' I'm a home assembly ' 
             
            } 
        }, 
        Methods: {

            goNews () { 


                // Note: The official document wrong 


                // first jump method 

                // the this $ router.push ({path: 'News'}). 


                // . router.push the this $ ({path: '/ Content / 495'}); 







                // the other jump method 

                    //    {path: '/ News', Component: News, name: 'News'}, 


                    // router.push ({name: 'News' , the params: {the userId: 123}}) 


                    the this . $ router.push ({name: ' News ' }) 


                

            } 
        } 
    } 

</ Script > 

< style lang = "SCSS" scoped > 
    
</ style >