vue路由

1.路由定义

路由是一组key和value的映射关系，key为路径，value是component

工作过程：当浏览器的路径发生改变时，对应的组件就会显示。

2.路由切换

可以通过router-link标签实现

          <router-link  active-class="active" to="/shop">About</router-link>

3.路由呈现位置

通过router-view标签呈现

<router-view></router-view>

4.路由注意点

（1）路由组件通常放在pages和views文件夹中，组件放在components中。

（2）通过切换，路由组件默认是销毁创建，需要的时候再去挂载。

（3）每个组件都有自己的$route属性，里面r获取存储着自己的路由信息。

（4）整个应用都有一个router，可以通过$route到。

5.嵌套路由

使用children属性

//路由配置
routes:[{
path:'/shop',
component:Shop,
children:[
{
path:'goods'  //注这里不需要/
component:Goods
}
]
}]
//跳转方式
<router-link to='/shop/goods'></router-link>

6.命名路由

作用：用来简化路由的跳转

{
name:'shop',
path:'shop',
component:Shop
}

7.路由传参

（1）使用路由的query参数

<router-link to='{
path:'/shop/goods/detail',
query:{
id:1,
val:'衣服'
}
}' ></router-link>

(2)使用路由params方式

//标签式跳转传参
<router-link to='/shop/detail/detail/1/衣服'></router-link>
//params跳转设置
<router-link to='{
name:'detail',//只能跳转命名路由
params:{
id:1,
val:'衣服'
}
}' ></router-link>
//路由配置
children:[
{
name:'goods',
path:'goods',
component:Goods,
children:[{
name:'detail,
path:'detail/:id/:val',//使用占位符接受传过来的参数
component:Detail
}]
}
]

8.路由的props属性

作用：使路由更方便的获取传过去的参数

children:[
{
name:'goods',
path:'goods/:id/:val'
component:Goods，
props(route){  //route可以获取传过来的参数，并在Goods组件中通过props进行接受id和val
   return {
  id:route.params.id,
  val:route.params.val
}
}
}
]

9.编程时路由导航

//push和replace的区别push会保存跳转历史（可以后退），replace替换跳转路径（不可以回退）
btn(){
this.$router.push({
path:'shop',
query:{
id:1,
val:'衣服'
}
})
//前进
this.$router.forward();
//后退
this.$router.back();
//可前进后退刷新
this.$router.go(1)
//正数前进几个
//负数后退几个
//不填刷新
}