Vue 路由及路由默认跳转
路由就是让根组件动态得去挂载其他组件;
步骤:
1 //路由配置: 2 3 4 //1.安装 5 6 npm install vue-router --save / cnpm install vue-router --save 7 8 9 //2、引入并 Vue.use(VueRouter) (main.js) 10 11 import VueRouter from 'vue-router' 12 13 Vue.use(VueRouter) 14 15 16 //3、配置路由 17 18 19 20 1、创建组件 引入组件 21 22 23 2、定义路由 (建议复制) 24 25 const routes = [ 26 { path: '/foo', component: Foo }, 27 { path: '/bar', component: Bar }, 28 { path: '*', redirect: '/home' } /*默认跳转路由*/ 29 ] 30 31 // 3、实例化VueRouter 32 33 const router = new VueRouter({ 34 routes // (缩写)相当于 routes: routes 35 }) 36 37 // 4、挂载 38 39 40 new Vue({ 41 el: '#app', 42 router, 43 render: h => h(App) 44 }) 45 46 47 48 //5 、根组件的模板里面放上这句话 <router-view></router-view> 49 50 51 52 53 //6、路由跳转 54 <router-link to="/foo">Go to Foo</router-link> 55 <router-link to="/bar">Go to Bar</router-link>
posted on 2018-06-19 15:38 changedman 阅读(651) 评论(0) 编辑 收藏 举报