Vue.js框架的基础概念 路由

这就是一个简单的数据渲染。真正用Vue开发前端的时候我们一般都用手脚架Vue cli他的功能如其名就是为我们搭好框架将底层文件配置有助于我们迅速直接开发。在Vue cli中的文件划分主要如下：

assets//主要放css文件与图片文件再分两个包

components//放公共组件。也可以分为common//放项目之间的公共content//放业务相关的组件

views//放主要的组件

router//放路由

store//公共状态管理文件夹

network//网络相关的都放在这

common//公共js文件

接下来主要介绍一下我觉得重要的地方，路由——router

路由的作用就是管理页面组件之间的组成以及跳转，路由就是一个.js文件。

Const router =[]里面就是配置每个组件的名称，路径，组件。例如一个登录界面里面包括登录功能和公告栏功能

它的路由配置就是

const routes =[{ path: '/homepage',

name: 'homepage',

component: homepage,

children: [{ path: '/login',

name: 'login',

component: login }, { path: '/notice',

name: 'notice',

component: notice }]}]

这样就是将登录与公告栏两个功能区放在了homepage里面

然后将整个homepage组件通过与放在App.vue里面显示，其中的作用主要是指明要展示的组件的路径，就是用来展示组件如果没有它既是加了页面也不会显示

想跳转路径时可以用

this.$router.push({ path: '*'})

语法进行跳转，这个跳转的实现就是改变刚刚组件所在里的路径，还是显示在组件对应的所处的位置。

希望浅薄的知识对你有帮助。

Web开发学习之路仍在继续…

","thumbnails":[{"url":"http://image.uczzd.cn/2154320653951420341.jpg?id=0","width":736,"height":437,"type":"jpg","preload":0,"daoliu_url":"","daoliu_title":"","colors":1}],"multiStrategyThumbnails":{},"images":[{"title":"","url":"http://image.uczzd.cn/1475877820043213230.jpg?id=0","description":"","index":0,"width":1174,"height":810,"preload":0,"type":"jpg","focus":"50_50","original_url":"","daoliu_url":"","daoliu_title":"","gallery_id":"","gallery_type":0,"is_hd":0,"image_extra":{}},{"title":"","url":"http://image.uczzd.cn/6299395447708116234.jpg?id=0","description":"","index":1,"width":1901,"height":689,"preload":0,"type":"jpg","focus":"50_50","original_url":"","daoliu_url":"","daoliu_title":"","gallery_id":"","gallery_type":0,"is_hd":0,"image_extra":{}},{"title":"","url":"http://image.uczzd.cn/2154320653951420341.jpg?id=0","description":"","index":2,"width":736,"height":437,"preload":0,"type":"jpg","focus":"50_50","original_url":"","daoliu_url":"","daoliu_title":"","gallery_id":"","gallery_type":0,"is_hd":0,"image_extra":{}}],"album":{"intro":"","enabled":false,"cover_image":"","img_pg_type":0},"tags":["path"],"audios":[],"category":["科技"],"videos":[],"cid":999,"contentExtHyperlinks":[],"contentExtVotes":[],"local":{},"showId":"","banner":false,"followed":false,"textSheetGraph":false,"outer_id":"","is_show_ad":false,"title_icon":"","grab_time":1610161068686,"clickable_url":true,"item_type":0,"style_type":0,"op_mark":"","op_mark_icolor":0,"op_mark_iurl":"","editor_icon":"","editor_nickname":"","editor_extend":{},"op_info":"","post_like_url":"http://iflow.uczzd.cn/iflow/api/v1/cmt/article/like/12343659162431330663?uc_param_str=dnnivebichfrmintcpgieiwidsudpf","post_dislike_url":"http://iflow.uczzd.cn/iflow/api/v1/cmt/article/dislike/12343659162431330663?uc_param_str=dnnivebichfrmintcpgieiwidsudpf","app_download_url":"","app_download_desc":"","download_type":"","site_logo":{"id":2287864,"style":2,"desc":"CSDN","link":"","img":{"url":"","width":0,"height":0,"type":"","preload":0,"daoliu_url":"","daoliu_title":"","colors":0}},"enable_dislike":true,"view_extension":"","view_extension_obj":{},"is_drop_down_style":false,"dislike_infos":[{"type":0,"code":2,"msg":"path","with_review":0},{"type":0,"code":5,"msg":"CSDN","with_review":0},{"type":1,"code":27,"msg":"内容质量差","with_review":0}],"reco_desc":"","reco_type":-1,"news_poi_mark":{},"item_ext_bar":{},"item_attach_data_ext":"","is_wemedia":false,"seed_name":"CSDN博客_架构","view_cnt":0,"participate_cnt":0,"is_original":0,"is_exclusive":0,"org_tags":["path"],"doc_ext_obj":{"thumbnail_select_status":2},"sub_item_type":255,"allow_dup":0,"out_biz_id":"","emoticon_sensitive":false,"foot_img_hyperlinks":[],"axis_id":"","axis_title":"","humour_topic":[],"modify_time":1610161113735,"show_status":0,"leaf_ext":{},"ad_size":1,"local_time":0,"source_name":"CSDN","origin_src_name":"CSDN","publish_time":1609954534000,"content_type":0,"daoliu_type":0,"original_url":"https://blog.csdn.net/lmmmmmnb/article/details/112301354","content_length":1729,"block_thumbnails":[],"multi_thumbnails":{},"cmt_cnt":0,"hot_cnt":3,"load_priority":0,"use_cache":0,"fresh_time":0,"article_like_cnt":3,"like_cnt":0,"dislike_cnt":0,"share_cnt":0,"player_cnt":0,"fav_cnt":179,"read_id":"16183940302524044439","movie_star_tags":[],"query_tags":[{"tag":"path","url":""}],"video_tags":[],"show_impression_url":"","wm_author":{},"participant_cnt":0,"avg_score":0,"matched_tags":[],"character_cards":[],"hot_cmts":[],"cmt_url":"http://sp-iflow.uc.cn/webapp/webview/xissAllComments?app=uc-iflow&aid=12343659162431330663&cid=0&zzd_from=uc-iflow&uc_param_str=dnnivebichfrmintcpgieiwidsudpf&uc_biz_str=S:custom|C:comment|N:true","cmt_enabled":true,"redirect_ch_id":0,"redirect_ch_name":"","redirect_ch_img":"","redirect_ch_desc":"","zzd_url":"http://sp-iflow.uc.cn/webview/news?app=uc-iflow&aid=12343659162431330663&cid=0&zzd_from=uc-iflow&uc_param_str=dndsfrvesvntnwpfgicp&recoid=&rd_type=reco&sp_gz=3&ab_tag=4035A2;4509C2;4560B2;5020D2;5299C2;5355D2;5450B2;5524R2;5547A2;5652A2;5718A2;5722A2;5795B2;5821B2;5831B2;5909A2;5930B2;5943D2;5952B2;5970B2;5971F2;5989A2;6037C2;6060D2;6064B2;6078D2;6083A2;6117A2;6160B2;6164B2;6178C2;6183A2;","share_url":"https://iflow.uc.cn/webview/news?app=uc-iflow&aid=12343659162431330663&cid=0&zzd_from=uc-iflow&uc_param_str=dndsfrvesvntnwpfgicp&recoid=&rd_type=share&sp_gz=3&ab_tag=4035A2;4509C2;4560B2;5020D2;5299C2;5355D2;5450B2;5524R2;5547A2;5652A2;5718A2;5722A2;5795B2;5821B2;5831B2;5909A2;5930B2;5943D2;5952B2;5970B2;5971F2;5989A2;6037C2;6060D2;6064B2;6078D2;6083A2;6117A2;6160B2;6164B2;6178C2;6183A2;&pagetype=share&btifl=100","ad_content":{},"qiqu_info":{},"content_ext_audios":[],"reco_reason_type":-1,"reco_reason":"","reco_reason_iurl":"","reco_reason_icolor":0,"reco_tag_desc":"","video_immersive_mode":false,"daoliu_switch":{"icon":false,"relate":false,"comment":false,"img_desc":true,"hot_query":false},"event_tag_info":[],"is_low":false,"question_id":"","game_guess":{},"merge_tags":["path"],"model_tags":[],"like_status":0,"small_video":{},"heat_cnt":0,"heat_url":"","immersive_type":0,"novel_info":{},"pre_load":0,"can_tts":0}; var zzdReadId = "e5834bef0fe811e4222b98f54cbefca9"; } catch (e) { console.error(e); }