路由跳转

所谓的路由跳转，其实就是点击对应元素后，页面会跳转到我们提前设置的路由地址上。

template模版中可以设置路由跳转（有点像a标签），而在JS代码中我们还可以根据条件判断来设置路由跳转，这两种下面都会提到。

<router-link>标签

<router-link tag="a" active-class="active-aaa" exact-active-class="exact-active-aaa" to="/">首页</router-link>
<router-link tag="a" active-class="active-aaa" exact-active-class="exact-active-aaa" to="/list">列表</router-link>
<router-link tag="a" active-class="active-aaa" exact-active-class="exact-active-aaa" to="/car">购物车</router-link>
<router-link tag="a" active-class="active-aaa" exact-active-class="exact-active-aaa" to="/mine">我的</router-link>

这个标签的效果，就是会在渲染的时候变成a标签，然后将页面跳转到to后面所写的路由地址上去，如下图是路由配置

注意，exact-active-class设定了一个类名，你给这个类名设置样式，最后就会在被选中的标签上生效。如果你不想设置类型，直接使用默认的也可以。

//这个是直接写不需要设置类名

.router-link-active{
  color:white;
  background: salmon;
} 

.router-link-exact-active{
  color:white;
  background: salmon;
} 

注意，带了exact点缀的代表的是精准匹配，不写就是包含匹配。

携带参数之query传参

// 跳转时带数据 query传参

<router-link :to="{name:'detail',query:{gid:item.goodsId,a:1,b:2}}"></router-link>


//接收参数
var { gid } = this.$route.query;
this.gid = gid;

//必要时你自己打印this.$route看看

携带参数之params传参

如何传参?

需要给路由配置动态路径参数 => 将数据拼接到 url(路径)中 /detail-copy/10074768384047

1. 给路由配置动态路径参数 => :xxx 就是动态路径参数的参数名

{

path: '/detail-copy/:gid',

name: 'detail-copy',

component: DetailCopyView

},

2. 传参, 可以通过声明式或编程式导航 传递动态路径参数

声明式

a. 手动拼接

<router-link :to="'/detail-copy/'+item.goodsId"></router-link>

  


b. to属性动态绑定对象 (注意: path不能和params同时使用,不生效)

  


直接跳转(没有带数据)

<router-link :to="{path:'/detail-copy'}"></router-link>

<router-link :to="{name:'detail-copy'}"></router-link>

  


<!--path不能和params同时使用,不生效 -->

<router-link :to="{path:'/detail-copy',params:{gid:item.goodsId}}"></router-link>

  
  
  


<!--可以使用 name和params , 生效 -->

<router-link :to="{name:'detail-copy',params:{gid:item.goodsId}}"></router-link>

3. 如何接收

VueRouter 会默认解析和处理数据,只需要通过当前 Vue 实例的$route属性接收即可 (this.$route.params)

VueRouter 中全局属性(Vue.prototype.xxx),官方内置,可以直接使用

$route 当前路由信息(地址栏中的路由信息) name,path,query,params,fullpath

$router 路由实例(包含所有路由信息 -> 包括当前路由 currentRoute) => 常用于路由跳转(编程式)

在JS代码中路由跳转

 <router-link :to="{name:'detail2',params:{gid:'100016799352',a:1,b:2}}">
假装这个是商品A
</router-link>   |   
<router-link :to="{name:'detail2',params:{gid:'100011530887',a:1,b:2}}">
假装这个是商品B
</router-link>