路由器配置
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过渡