vue：vue-router 根据不同的地址找到不同的页面
单页面应用：无需频繁的从后台刷新页面
npm install vue-router --save 保存到package。json中
在main.js引入 import VRouter from ‘v-router’
Vue.use(VRouter); 注册VRouter类
let router=new VRouter({
routes:[
//数组
{
path:‘/apple/:color‘, :color,即是参数
component:Apple
}，{
path：‘’/banana”,
component:Banana
}
]
}) //实例化Router
new Vue({
el:"#app",
router:router,//调用router
template:‘<APP/>‘,
comonents:{ App}
})
App。vue规定路由中的组件在哪显示
<router-view></router-view>
路由参数？type=1&code=2
path：‘/apple/:color/detail/:type‘
带引号的 都是参数
路由参数 ：添加完参数后，必须完整的输入地址
子组件获取当前路由的参数
当前组件
{{$route.params.color}}
methods：
{
getParam(){
console.log(this.$route.params)
}
}
路由的嵌套
{
path：‘/apple‘
component:Apple
children:[
path:‘/red‘,
component:RedApple
]
}
chiidren的组件会渲染到Apple的vue文件的 router-view中
<router-link :to="{path:‘apple/red‘}">to apple red</router-link>
<router-link to="apple"></router-link> //此时的to代表href
router-link :to="" 动态绑定 ，或者对象 {path:,param:{color:‘red‘},name:}接受字符串 ：to=" ‘string‘ " tag="li" 默认的router-link是a 可以改为li
编程似的导航：
router.push({path: ‘apple‘})
router.beforEach()每次跳转前可写方法进行操作，比方说异步检查一下用户信息状态，符合条件再执行router.push({path: ‘apple‘})
1. <keep-alive>
<router-view></router-view>
//当前路由内容会被缓存
</keep-alive>
2. 当前路由会添加默认类名：router-link-active