路由 vue-router

路由器配置

import Router from 'vue-router'

Vue.use(Router)

new Router({

    　base:

　　mode:'history'

　　routes: [{

          name:"",

　　   path:"",

　　   components: 

         children:  [ ]

　　}]

})

1）模式：mode： History, Hash, Abstract

《vue2实践揭秘》p142

跳转

1）HTML跳转：

<router-link to="/ProductList"></router-link>  缺点：配置中链接一改，引用的都得改

<router-link :to="{ name: 'Home'}"></router-link>  命名路由，配置中链接一改，不会影响

2）JS跳转：

this.$router.push

生成其他标签

<router-link tag="li"><span>点我</span></router-link>

输出的html结构：

<ul><li><span>点我</span></li></ul>

显示当前路由界面

<router-view/><router-view/>

高亮状态样式

.router-link-active

或通过配置修改class名字，属于包含匹配

new Router({

    linkActiveClass:

})

精确匹配设置 exact：<router-link   to=" "   exact /> =》《vue实践揭秘》p169

其他

 1）结合<keep-alive>使用

 2）结合transition过渡