Vue路由的各个属性的作用和用法

1.to
去到目标路由，被点击后内部会将to里面的值传到router-push()。

<router-link :to="‘home‘">Home</router-link>

<router-link :to="{ path: ‘home‘ }">Home</router-link>

//命名路由
<router-link :to="{ name: ‘user‘, params: {userId: 123} }">Home</router-link>

//带查询参数，下面的结果为/register?plan=private-->
<router-link :to="{ path: ‘register‘, query: {plan: ‘private‘}}">Register</router-link>

2.replace
添加replace属性后，在点击石，会调用roter.replace() 导航不会留下history（历史）记录，点击后退不会返回上一个页面
3.append
设置append属性后，则在当前路径前添加基路径，例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配了，则为/a/b
4.有时候想要渲染成某种标签，例如

• 于是我们使用tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
  5、active-class设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置, 默认值为 ‘router-link-active‘

• .router-link-active {
           background-color:#3498DB;
           color: white;
         }
  

  6、☆☆☆☆exact（动态渲染的导航选中高亮时使用）
  　　“是否激活”，默认是false 。举个粟子，如果当前的路径是/a 开头的，那么 也会被设置css类名
  　　按照这个规则， 将会点亮各个路由！想要链接使用"exact匹配模式"，则使用exact属性：
  // 这个链接只会在地址为 / 的时候被激活

  <router-link to="/" exact>Home</router-link>
  
  <router-link to="/user">USER</router-link>
  
  <router-link to="/user/userinfo">USER-info</router-link>
  

  // 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！