vueRouter-路由基础

一、重要概念

1、router是路由器

2、routes是一组路由

3、route某个路由

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
//在vue根实例中添加router选项后，在组件中
this.$route-----当前路由
this.$router----获取路由器

4、<router-view></router-view> 是用来显示组件的（同一个页面可以使用多个，用name区分，route配置项要用components）

5、<router-link to="/user/123"></router-link> 标签跳转路由

二、单个路由的配置项

import User from '../xxx'
{
   path: '/user/:id',//path是地址栏#后面的东西
   props:true,//可以将路由的参数作为属性传递到组件中
   name: 'user',//有name时，当前路由变成唯一的了
   component: User,
   component: () => import('../views/User.vue'),//延迟加载（用到的时候加载）
   redirect: '/home',//重定向
   children:[
       {
          path: 'collection',// 以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
          name: 'collection',
          component: Collection
        }, 
   ]
}

三、js方式跳转传参

//使用name跳转
this.$router.push({
  name: 'Describe',
  params: {
     id: id
  }
})
this.$route.params.id
//使用path跳转
this.$router.push({
   path: '/describe',
   query: {//query传的参数会在地址栏中？后面显示
      id: id
   }
})
this.$route.query.id