一、router-link
<!-- router-link-->
<router-link to='/'>home</router-link>
<router-link to='/about'>about</router-link>
<router-link to='{name:'one'}'>one</router-link>
<!--
router-link:会被自动解析为a标签
它与a标签的区别：
a标签点击url时，页面会被刷新
router-link：就是相当于分页面板一样，不会刷新当前页面
设置a标签被选中时的状态，就是一直保持选中的状态
a.router-link-exact-active{
background-color:pink;
}
-->
二、router-view
<!--
router-view:就是用来为路由渲染的组件占位置，一般就是在跟组件中
-->
<!--App.vue 根组件中-->
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
</style>
三、$router.push逻辑跳转
// router 的逻辑跳转
// 1. 直接加路径跳转
this.$router.push('/one-view')
// 2. 可以传对应的url和url携带的参数
this.$router.push({
name:'one-view',
parms:{id:1}
})
四、$router.go跳转
this.$router.go(-1)
// router采用history的方式访问访问上一级记录
五、router间传参
window.console.log(this.$router)// 获取当前访问url的地址等参数
/* {name: "home", meta: {…}, path: "/", hash: "", query: {…}, …}
fullPath: "/" 当前访问的url全路径
hash: ""
matched: [{…}] 这里面放的时一些正则
meta:
__proto__: Object
name: "home" // 这个时url的页面的别名
params: {} // 这是url请求携带的参数，时以键值对的形式存储的
path: "/"
query: {}
__proto__: Object
*/
//如何获取这个url中的参数？
this.$router.params //获取的携带参数的字典
this.$router.params.key // 因为返回的字典对象，所以都是可以点取值的
// 如何给url中参数添加值？
this.$touter.params['key'] = value
