Vue-router路由跳转的两种方式

1、基于链接跳转的vue-router跳转方式：

在vue-router中，存在着一个自定义标签，<router-link to:“url”>----能够跳转到我们想要跳转到的url页面，**搭配显示出相对应的组件页面。**一般而言，创建一个组件式页面编写路由大概分成以下几步：

1、to 后面可以  跟组件名字  也可以是  路径

<router-link to="product">test</router-link>
<router-link :to="{ path: 'product' }">产品展示区域</router-link>
<router-link :to="{ path: 'details' }">产品详情页面</router-link>

2、也可以直接跟斜杠路径

2、根据window.location.herf改造的router编程式导航

1.在需要点击跳转的div处添加一个点击事件，一般而言这个div在的位置就是a链接在的位置

2.编写点击事件函数

3.点击事件函数中，使用this.$router.push()来创建相关的路由方式，name在router.js中的相关路由规则中定义:{path:“url”,component:com1,name:“user”}