对于卖座项目（vue项目）的思考

1、localhost：8080本地服务器呈现的页面，是渲染App.vue根组件的结果；

根组件里的东西可以渲染到每一个页面，这里的每一个页面指的是localhost：8080本地服务器下的不同路由；

App.vue的代码:

<template><div>hello world </div><!-- 路由容器 --><router-view></router-view>
</template>

配了两个子组件路由，这两个子组件是不同路由下的：

const routes = [{path:'/film',component:FilmView},{path:'/cinema',component:CinemaView}
]

渲染跟组件页面：

渲染film路由页面：

结果发现：切换到子路由界面，根组件<template>标签里的内容也是会渲染到这个页面里面的，因为服务器本来渲染的就是App.vue根组件，所以当你切换到同域名同端口号下别的路由里也都是会有根组件的内容。

根组件的<template>里可以插入：普通的标签，子组件，路由容器

（1）插入子组件：

如果是根组件里使用的子组件功能，直接在App.vue使用子组件即可：

<template><div id="app"><tabbar-content></tabbar-content>//子组件功能</div>
</template>

<tabbar-content>子组件是底部导航栏的功能，是直接在根组件中使用的子组件，那就会在每个路由下显示这个功能，也就是在每个路由页面下都会显示；看下面几张图的对比：

上面两张图发现，无论在那个路由下，底部导航功能都是显示的，这就是根组件中使用子组件。

（2）插入路由容器

渲染不同的路由页面：

如果是渲染在不同路由下的子组件，就不需要像上面导入，需要在App.vue组件中插入路由容器：<router-view></router-view>；

然后配好路由，就可以在不同的路由下看到对应的子组件渲染出来的结果：

<template><div id="app"><tabbar-content></tabbar-content><!-- 路由容器 --><section><router-view></router-view></section></div>
</template>

在根组件里插上路由容器就相当于把子组件插在根组件App.vue里，就可以跟随着根组件里的标签一起渲染在页面上；

根组件里的内容会渲染到每个路由下面；

2、No match found for location with path "/"：

没有找到与路径“/”对应的位置，就是localhost:8080/ 路径没有配置；

解决办法：

给这个路径配置组件，使用重定向：

//重定向，优先级最低，只有没有路径了，才会用{path:'/',redirect:{name:'film' // 命名路由写法}},

3、使用vuex让底部导航栏，在一些页面显示在一些页面不显示：

store：index.js文件：

import { createStore } from 'vuex'export default createStore({state:{isTabbarShow:true},mutations:{hide(state){state.isTabbarShow = false},show(state){state.isTabbarShow = true}}
})

创建一个isTabbarShow状态，在hide、show函数里更改状态的值，实现隐藏显示；

App.vue：

在ul标签上增加：v-show属性，让导航栏功能在每个页面显示/隐藏：

<ul v-show="$store.state.isTabbarShow"><router-link to="/film" custom v-slot="{ navigate, isActive }"><li @click="navigate" :class="isActive ? 'yiyiactive' : ''"><i class="iconfont icon-dianyingpiaoiocn"></i><span>电影</span></li></router-link><router-link to="/cinema" custom v-slot="{ navigate, isActive }"><li @click="navigate" :class="isActive ? 'yiyiactive' : ''"><i class="iconfont icon-yingyuan"></i><span>影院</span></li></router-link><router-link to="/center" custom v-slot="{ navigate, isActive }"><li @click="navigate" :class="isActive ? 'yiyiactive' : ''"><i class="iconfont icon-31wode"></i><span>我的</span></li></router-link></ul>

detail页面：

mounted(){this.$store.commit("hide")console.log(this.$route.params.id)axios({url:`https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=9978299`,headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16661470114057618813288449","bc":"110100"}','X-Host': 'mall.film-ticket.film.info'}}).then(res =>{console.log(res.data.data.film)this.detaillist = res.data.data.film})},//vue3中销毁组件生命周期写法
unmounted(){this.$store.commit("show")
}

思路是：因为App.vue里的 v-show="$store.state.isTabbarShow" 控制导航栏组件在任何一个页面的显示和隐藏，在详情页面，我们想让它进来时隐藏，所以就调用hide方法，让isTabbarShow的值改为false，这样App.vue ”isTabbarShow"就是false，所以就不显示底部导航栏，当出去这个页面时，组件销毁，就调用show函数，这样把 “isTabbarShow”的值再改为true，就又显示出来了。

这样就实现了，在detail这个页面进来不显示底部导航栏，出去就显示底部导航栏。

对于卖座项目（vue项目）的思考相关推荐

Nginx 安装教程 (windows) 及详解并通过Nginx启动项目(vue项目举例)
Nginx 常用命令 Nginx windows安装教程通过Nginx启动项目(vue项目举例) 目录介绍 Nginx Nginx 是俄罗斯人 Igor Sysoev 编写的轻量级Web服务器,它的 ...
html移动轮播后盾网,后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件...
1.首先呢,咱们去gitHub上面找一个vue-awesome-swiper插件. 前端为了保证整个项目的稳定性,咱们安装2.6.7版本. vue npm install vue-awesome-s ...
使用pm2启动Node和Vue项目教程
安装pm2 $ npm install -g pm2 命令行全局安装pm2 将pm2加入到命令中去 ? 1 2 3 4 ln -s /usr/local/src/node-v8.9.1-linux-x ...
如何开启 vue 项目
在读此文章再此之前默认你已经安装了 vue 项目 vue项目脚手架@vue/cli安装运行项目 cmd 运行 cnpm run serve 运行的目录要在你的项目文件夹下比如我有一个项目 one ...
Vue项目脚手架搭建
Vue项目脚手架搭建 Vue 项目脚手架搭建需要的工具安装NodeJs 安装vue-cli 安装webpack 初始化项目启动项目 Vue 项目脚手架搭建需要的工具 NodeJs vue-cli ...
教你如何搭建vue项目
笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...
nginx部署vue项目(成功版)
1.nginx介绍 2.下载nginx 3.打包vue项目 4.把vue项目安装到nginx 5.修改nginx配置文件 6.启动.关闭nginx 7.报错及解决 1.nginx介绍 nginx是一个 ...
vue项目：集成富文本编辑器 - 百度ueditor（vue-ueditor-wrap）
一.背景集成百度ueditor,实现图文编辑二.项目介绍 vue---nuxt项目 vue项目:ueditor(vue-ueditor-wrap) 三.集成步骤 3.1.下载富文本编辑器 GitH ...
ngnix配置启动vue项目
1.nginx介绍 nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器. 2.下载nginx http://nginx.org/en/download. ...
tomcat部署vue项目（成功版）
1.tomcat介绍 2.下载tomcat 3.启动tomcat 4.打包vue项目 5.tomcat部署vue项目 1.tomcat简介 tomcat 是免费的web服务器.不使用tomcat也可以 ...

对于卖座项目（vue项目）的思考

对于卖座项目（vue项目）的思考相关推荐

最新文章

热门文章