vue中的路由 vue-router

vue中的路由及默认路由地址

1. 首先在项目根目录里面 通过 npm install vue-router --save 安装
2. 在main.js里面引入                                                                                                                                                                               

   import VueRouter from 'vue-router'Vue.use(VueRouter);//创建组件 这是我的两个组件
   import New from "./components/New.vue";
   import Header  from './components/Header.vue';//配置路由
   const routes=[  //这个routes最好不要改，如果改了之后下面的实例化也要改 比如你改为sss那么下面 //那么下面的routes要改为 routes:sss{ path:'/new', component:New},{ path:'/header', component:Header},{ path: '*', redirect:'/header'}//默认页面]//实例化Vuerouter
   const router=new VueRouter({routes
   })
   //挂载路由
   new Vue({el: '#app',router,   //加上我们的实例化对象render: h => h(App)
   })
   

    

3.  <router-link to="/new">New组件</router-link><router-link to="/header">Header组件</router-link><!--to属性放的这个值要跟我们main.js里面的const里面的path一样，不然会找不到的--><router-view></router-view> <!--动态加载的路由页面放在这里--><!--这个是用来展示组件的地方-->