当前位置: 首页 > 后端技术 > Node.js

使用vue-cli配合vue-router搭建一个完整的spa流程(二)

时间:2023-04-04 00:18:21 Node.js

上篇文章太长,写的时候拖拽太麻烦,重新打开文章。使用vue-cli配合vue-router搭建一个完整的spa流程(一)在(一)中,主要页面写好了,现在三个路由页面都写好了。第一步:先贴出路由实例index.js的代码。从'vue'导入Vue从'vue-router'导入路由器从'vue-resource'导入VueResource从'@/components/showone'导入tem从'@/components/showtwo'导入tem_cont从'@/components/导入tem_errorerror'//安装插件Vue.use(Router)Vue.use(VueResource)exportdefaultnewRouter({routes:[{path:"/user/:list/:listNum",component:tem,children:[{path:"con",component:tem_cont}]},{path:"/user/error",component:tem_error}]})代码很短,我一一解释。从'vue'导入Vue从'vue-router'导入路由器从'vue-resource'导入VueResource从'@/components/showone'导入tem从'@/components/showtwo'导入tem_cont从'@/components/导入tem_errorerror'↑这里是所有用到的数据和参数的介绍。//安装插件Vue.use(Router)Vue.use(VueResource)↑这里是vue-resource,一开始没有安装,打开项目,右键打开Git,输入npminstallvue-resource--save这是一个ajax插件,使用起来比较方便简单。路线:[{路径:“/用户/:列表/:listNum”,组件:tem,孩子们:[{路径:“con”,组件:tem_cont}]},{路径:“/用户/错误”,组件:tem_error}]↑路由配置,详情页是主页面的子路由。第二部分:三路xxxx.vue文件编写Ⅰ:showone.vue先贴代码,有点复杂,慢慢解释。模板有组件组成:

  • 主页
  • 第一页
  • {{item.content|more}}
    ↑这是第一部分,包含导航列表和当前分类①中的所有内容:v-show='routerData.mainShow'这个控制整个部分的显示和隐藏,上一页和下一页的按钮都是同一个控件数据,因为显示和隐藏的逻辑是一样的。都隐藏在详情页,显示在首页。②:v-on:click='link(0)'导航按钮跳转到绑定函数。③:v-for='(item,index)inrouterData.showData'循环数据并渲染列表。④:v-on:click='go(item,index)'每个列表都绑定了一个跳转到详情页的函数。⑤:{{item.content|more}}渲染介绍,当内容中数字过多时通过过滤器进行剪切↑这是第二部分,子路由入口。v-bind:router-nesting='routerData'给出了路由器中渲染页面的数据。接下来是脚本部分,首先引入router实例importrouterfrom'.././router'然后接收zjapp.vue传过来的数据props:["routerData"]methods功能解释:go(obj,index){router.push({path:this.$route.path+"/con",query:{type:index}});}↑这是点击列表内容时执行的函数。索引值从模板传过来,加到url中,从而得到列表中的第一名。link(num){varlistNum=this.$route.path.slice(6,7);if(listNum!=num){router.push("/user/"+num+"/0");this.isActive=this.$route.path.slice(6,7);}}↑link(num)函数是导航点击绑定的函数,通过传记num将url转化为对应的分类,从而触发手表重新获取数据。这里加一个判断,重复点击无效。filters:{more(value){varnewMessage=value.slice(0,40)+".......点击查看更多";返回新消息;}}↑过滤,减少字数。style就不解释Ⅱ:showtwo.vue这个是文件的详情页,也就是在主页面点击列表内容后跳转的页面。↑数据类似于showone.vue,routerNesting数据通过ziapp.vue->showone.vue->showtwo.vue传递。back()函数将url从/user/0/0/con?type=2跳转到/user/0/0触发watch更新数据。Ⅲ:error.vue↑嗯~o( ̄▽ ̄)o,这个比较简单,就不解释了。结论到目前为止,一切都已经清楚了。如果您按照步骤操作,可以第一次看到一个简单的水疗中心。总体思路:通过watch监听url的变化,变化后执行routerPath()函数,然后重新获取数据。新手,有错误,需要改正的地方欢迎留言!后续会有其他示例项目的详细讲解。至于时间,就看你什么时候找工作了( ̄▽ ̄;)...