vue路由配置

https://router.vuejs.org/

 

一、安裝路由

npm install vue-router --save / cnpm install vue-router --save

二、在main.js中引入

import VueRouter from 'vue-router'

Vue.use(VueRouter)


三、配置路由

 

（1）建立組件，引入組件

 （2） 定義路由   

    const routes = [

        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
        { path: '*', redirect: '/home' }   /*默認跳轉路由*/
    ]

 (3)實例化VueRouter

 const router = new VueRouter({
     routes                               // （縮寫）至關於 routes: routes
 })

 四、掛載
   new Vue({
       el: '#app',
       router，
      render: h => h(App)
  })

5 、根組件的模板裏面放上這句話 <router-view></router-view> 
 
六、路由跳轉
 

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>