声明式导航

router-link

声明式导航只能跳转

to 跳转的链接
replace 跳转到的页面会替换上一条历史记录
event 可以改变触发的方式
append to中不能有/，会把url拼接到当前url之后
tag 可以把router-link渲染成任意标签
active-class 修改router-link上生成的activeclass的名字
exact-active-class 修改router-link上生成的精确的activeclass的名字

 <router-link to="path">跳转到XXX</router-link>
 
   //  方式一和方式二结果一样只是有两种写法 如果不想字符串拼接，就可以使用query对象形式书写
 方式一：<router-link :to="'/topic?id=' + topic.id"></router-link>
 方式二：<router-link :to="{path: '/topic', query: {id: topic.id}}"></router-link>


 <router-link :to="'path?id=' + id"></router-link>
 <router-link :to="{path: 'path'}"></router-link>
 <router-link :to="{path: 'path', query: {id: 1}}"></router-link>
     //显示 ： /path？id=1
 <router-link :to="{name: 'name', query: {id: 1}}"></router-link>
 
 // 如果有params参数，params必须配合name使用，不能配合path使用
 <router-link :to="{name: 'name', params: {id: 1}}"></router-link>

编程式导航

router.方法名

可以在想要进行页面跳转的时候对页面进行跳转，基于js的跳转方式（location.herf（）)

在每个组件中都有this.$router  对象，不是$route
路径怎么写在to里，push中也一样写

push（）跳转到对象的页面
replace（） 会替换历史记录，不会有返回上一级的按钮功能出现
go（number） 在历史纪录上进行跳转
go（-1） 返回上一页
back（）相当于go（-1）
forward（） 相当于go（1）

this.$router.push()
this.$router.replace()
this.$router.go()
this.$router.back()
this.$router.forward()