路由懒加载于svg
路由懒加载:const 组件名=() => import('组件路径');
路由传参:
注意:,当使用路由参数时,例如从 /find/hello导航到 /find/word,原来的组件实例会被复用。因为两个路由都渲染同个组件,不会触发生命周期钩子,需要通过watch来监听路由参数的变化
例如“
exportdefault{
name:'find', ..... watch:{'$route'(to,from) {
console.log(to.params);
}
},
组件中的slot,通过slot可以让组件复用性更强
编程式导航:即动态创建的路由
添加路由:this.$router.push() ,会向history添加新记录前进和后退:this.$router.go(步骤)替换:this.$router.replace() ,它不会向history添加新记录编程式导航如何传参: // 命名的路由 router.push({ name:'user', params: { userId: 123 }}) 其中:name为路由表router.js每项路由的名子 例如: { name:'login', path:'/login', component:login }, // 带查询参数,变成 /register?plan=private router.push({ path:'register', query: { plan:'private'}})
svg: svg矢量图,放大不失真,可以通过css,js操纵
应用领域:动画,icon等
svg使用:
第一步:http://www.iconfont.cn/ 官网,搜索需要的icon并添加到购物车
第二步:找开购物车,点击“下载代码”并解压,找到demo_symbol.html文件
第三步:打开demo_symbol.html文件,找开chrome开发者工具 ->elements
第四步:找到并右击svg标签->eidt as html,全选并复制
第五步:找开vue脚本架中的index.html,并将刚才复制的svg代码粘贴进云
第六步:将svg嵌入到对应的图标位置,格式: