vue-router router-link

个人理解vue-router能够实现当我们点击某个导航链接的时候能够动态的展示一个组件

使用方法：

1. 安装 ：npm install vue-router

2. 在main.js中加载使用
   import Vuerouter fom 'vue-router //加载路由模块
   Vue.use(VueRouter) //注册到Vue中才可以使用

3. 配置路由表
   const router = new VueRouter({
   //routes选项用来配置路由表
   //当请求/xxx时候渲染xxx组件
   //routes是一个数组，数组中储存一些固定格式的对象
   //对象的path表示请求的路径
   //对象的component用来指定你请求path路径的时候，渲染该组件

   routes:[//路由表
   {
   path:’/foo’,
   component:{
   template:<div>foo组件</div>
   }
   },
   {
   path:’/bar’,
   component:{
   template:<div>bar组件</div>
   }
   },

   ]
   })

   new Vue({
   el:’#App’,
   compnents:{App},
   template:’’,
   //配置实例选项router为你在上面new出来的VueRouter
   router:router
   })

//现在的问题是组件该往哪里渲染？

<router-view></router-view>

//在你的跟组件预留一个路由的出口，告诉路由当匹配到某个path的时候，把该助教渲染到哪里

//<router-view></router-view>组件标签是给路由看的，默认啥都没有，他不是固定的，他标识路由出口标记，当路由匹配到path xxx 的时候，会将router-view替换到我们在路由表中配置好的组件

在页面上使用配置好的路由（要加#号）

//这里以a标签为例

<a href='#/href'>Go Foo</a>
<a href='#/href'>Go Bar</a>

//然后就可以实现点击对应的链显示对应的组件

将路由组件放到vue单组件中

//引入两个组件
import Foo from ‘./components/Foo’
import Foo from ‘./components/Bar’
//然后路由表就变成了

  routes:[//路由表
   {
      path:'/foo',
      component:Foo
   },
   {
      path:'/bar',
      component:Bar
   },
   
  ]

组件内路由跳转

this.$router.push('/heros')

动态路由将值传到组件

{
//：id表示动态的
//在该路径中，:id需要给一个具体的英雄id
//也就是说 /heros/edit/1、 /heros/edit/2、 /heros/edit/3、都会匹配到HeroEdit组件（同事将id传到这个组件中）
//然后我们就可以在HeroEdit组件中通过this.$route.params来获取这个:id的值了
path:'heros/edit/:id',（：xx也可以理解成一个占位符，流出来的一个坑 xx是起的名字）将来就可以在被匹配到的组件中通过this.$route.坑名来获取
component:HeroEdit
}
//然后我们可以在HeroEdit组件中的created函数中使用this.$route.params获取这个值

router-link

1.把需要被高亮的导航链接由a链接替换成router-link组件（其实router-link最终还是要渲染成a链接）
router-link有一些属性：
to用来配置a导航链接的href,注意这里不需要加#,因为router-link会自动帮你拼接#

```
<router-link to="/heros">跳转</router-link>
我们可以修改默认渲染的标签和默认渲染的样式

<router-link to="/heros" tag="li" active-class="active">跳转</router-link>
```
//router-link会自动为匹配到的导航路径添加一个默认的：router-link-active
我们可以收懂的为router-link-active设置样式

```

router-link-active{
color：red;
}
```