路由基本概念
- route，它是一条路由。
{ path: '/home', component: Home }
- routes，是一组路由。
const routes = [
{ path: '/home', component: Home }, { path: '/about', component: About } ]
- router能够理解为一个容器，或者说一种机制，它管理了一组route。简单来讲，route只是进行了URL和函数的映射，而在当接收到一个URL以后，去路由映射表中查找相应的函数，这个过程是由router来处理的。
const router = new VueRouter({ routes // routes: routes 的简写 })
VUE中
- $route为当前router跳转对象里面能够获取name、path、query、params等。
- $router为VueRouter实例，想要导航到不一样URL，则使用$router.push方法，返回上一个history使用$router.go方法。跟上面说的同样，这里的$router就管理路由的跳转，英文里er结尾的都表示一种人，这里你能够把这个想象中一个管理者，他来控制路由去哪里（push、go），这样就比较容易记。
路由跳转
- 1 能够手写完整的path：
this.$router.push({path:`/user/${userId}`})
这种方式须要在路由中做以下配置css
{
path: '/user/:userId', name: '***', component: *** }
这种接收参数的方式是this.$route.params.userId。typescript
- 2 也能够用params传递：
this.$router.push({name:'Login',params:{id:'leelei'}}) //不带参数 变成 ip/login
- 3 也能够用query传递：
this.$router.push({path:'/login',query:{id:'leelei'}) //带查询参数变成 ip/login?id=leelei //带斜杠/表明从根目录出发，不会嵌套以前的路径
query传参是针对path的，params传参是针对name的。。接收参数的方式都差很少。。this.$route.query.和this.$route.params.segmentfault
注意这只是跳转url，跳转到这个url显示什么组件，得配置路由。router跳转和<router-link>标签跳转，规则差很少。浏览器
一些须要注意的事
- 使用query传参的话，会在浏览器的url栏看到传的参数相似于get请求，使用params传参的话则不会，相似于post请求。
- 若是提供了path，params将会被忽略（即若是要使用params传参，则必定要使用name），可是query不属于这种状况。若是使用完整路径和query传参，刷新页面时不会形成路由传参的参数丢失。
- router.push和router.replace的区别是：replace不会向 history 添加新记录，而是替换掉当前的 history 记录，即便用replace跳转到的网页‘后退’按钮不能点击。
转载自：https://segmentfault.com/a/1190000016662929函数