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>