vue-router 的路由跳转的方法总结

编程式的导航

<router-link to="/" tag="p">耳机频道</router-link>
//to是一个prop.指定需要跳转的路径,也可以使用v-bind动态设置
//tag可以指定渲染成标签,默认是a标签
<router-link to="/" replace>跳转回去</router-link>   
//这样的写法是不会留下历史痕迹,回退键无效
<router-link :to="{ name: 'product', params: { id : 1 }}">User</router-link>
// /product/1

函数式的导航

name和params配合使用，path和query配合使用。path配合params使用配页面拿不到参数的

//这里假设 我要跳转product页面并且附带参数id  
//这里定义好了list.id 就是 动态的值
this.$router.push('./product/' + list.id)                       // 字符串的方式进行描述
this.$router.push({name : 'product',params: { id : list.id }})    // 命名的路由的方式进行描述
this.$router.push({ path: `/product/${list.id}` })               // 直接定义path类似第一种
//比较常用的跳转路由的方法
//假如是带查询参数
router.push({ path: 'product', query: { id: list.id }})            // /product?id=1