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>

猜你喜欢

转载自www.cnblogs.com/changedman/p/9198851.html