尚硅谷Vue项目实战 |
您所在的位置：网站首页 › 没有螺母也能固定的螺栓是什么 › 尚硅谷Vue项目实战 |
|
本文最后更新于4 天前，其中的信息可能已经过时，如有错误请发送邮件到[email protected]
基本介绍
视频链接：尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅) 前台 + 后台 初始化项目 vue-cli · public文件夹一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中。 · src文件夹(程序员源代码文件夹):assets文件夹：一般放置多个组件共用的静态资源，需要注意，放置在assets文件夹里面静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包JS文件里面。components文件夹：一般放置的是非路由组件（全局组件) 基本配置 · 项目运行后，浏览器自动打开像老师说的加” —open“后浏览器显示 ”当前无法使用此页面 0.0.0.0 未发送任何数据“ 应该加” —open —host=localhost“，如下图所示： · 关闭 eslint 校验工具 项目路由分析 路由组件注意：vue2只能用3版本的路由！！！安装vue-router要执行命令：npm i vue-router@3 路由组件放置在 pages/views 文件夹里面。 配置路由router/index.js //引入vue import Vue from 'vue'; //引入vue-router import VueRouter from 'vue-router'; //使用插件 Vue.use(VueRouter); //引入路由组件 import Login from '@/pages/Login' import Search from '@/pages/Search' import Home from '@/pages/Home' import Register from '@/pages/Register' //配置路由 export default new VueRouter({ routes: [ { path: "/login", component: Login }, { path: "/search", component: Search }, { path: "/home", component: Home }, { path: "/register", component: Register }， //重定向，在项目跑起来的时候，访问/,立马让他定向到首页 { path: "*", redirect: "/home" } ] })main.js 使用路由App.vue 路由的跳转 · 声明式导航 router-link必须要有 to 属性 登录 免费注册 · 编程式导航 $router.push/replace跳转 + 其他业务逻辑 搜索 goSearch(){ this.$router.push("/search"); } Footer组件显示与隐藏显示：Home、Search 隐藏：Login、Register · 路由元信息配置 meta { path: "/login", component: Login, meta: { show: false } } 路由传参 · 参数 params参数属于路径当中的一部分，在配置路由的时候需要 占位 query参数不属于路径当中的一部分，类似于ajax中的querystring/ home?k=v&kv=，不需要占位 · 字符串形式 //Header/index.vue goSearch(){ //字符串形式 this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase()); //search后面有"/"占位 } //router/index.js 添加占位 { path: "/search/:keyword", //search/后有":"！！！ component: Search, meta: { show: true } } · 模板字符串形式 //Header/index.vue goSearch(){ // 模板字符串(``)形式 this.$router.push(`/search/${this.keyword}?k={this.keyword.toUpperCase()}`); } · 对象形式 //Header/index.vue goSearch(){ //对象形式 this.$router.push( { name:"Search", params:{ keyword:this.keyword }, query:{ k:this.keyword.toUpperCase() } }) } //router/index.js { name: "Search", //配置名字 path: "/search/:keyword", component: Search, meta: { show: true } }, 路由传参面试题 · 路由传递参数（对象写法）path是否可以结合params参数一起使用?路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用。 · 如何指定params参数可传不可传？不指定的后果：url出错 //router/index.js { name: "Search", //占位后面加"?"!!! path: "/search/:keyword?", //帮助记忆：正则中的问号代表出现0次/1次，即可有可无 component: Search, meta: { show: true } } · params参数可以传递也可以不传递，但是如果传递的是空串，如何解决？如果传递空串，url会出错 使用undefined解决：params参数可以传递、不传递（空的字符串） this.$router.push({name: 'search', params: {keyword: '' || undefined}, query: {k: this.keyword.toUpperCase()}}) · 路由组件能不能传递props数据？（可以） 布尔值写法（只能传递params参数） //router/index.js { name: "Search", path: "/search/:keyword?", component: Search, meta: { show: true }, props:true } //Search/index.vue params参数：{{$route.params.keyword}}--------------{{keyword}} query参数：{{$route.query.k}} export default { props:['keyword'] } 对象写法（额外给路由组件传递一些props） //router/index.js { path: "/search/:keyword?", component: Search, meta: {show: true}, name: "search", props: {a: 1, b: 2} //对象 } //Search/index.vue export default { // 路由组件可以传递props props: ['keyword', 'a', 'b'] } 函数写法：可以传params参数，query参数（最常使用） //router/index.js { name: "Search", path: "/search/:keyword?", component: Search, meta: { show: true }, //函数写法（简化：不用return） props: ($route) => ({ keyword: $route.params.keyword, k: $route.query.k }) } //Search/index.vue export default { props:['keyword','k'] } 解决编程式路由跳转到当前路由，多次执行会抛出NavigationDuplicated的警告错误老师没有将底层的原因讲清楚就直接说解决方式了，于是我问了一下ChatGPT，得到的回复如下： 解决： //Search/index.vue goSearch(){ //对象形式 this.$router.push( { name:"Search", params:{ keyword:this.keyword }, query:{ k:this.keyword.toUpperCase() } }, ()=>{}, ()=>{} ) } //router/index.js // 把VueRouter原型对象的push保存一份 let originPush = VueRouter.prototype.push; let originReplace = VueRouter.prototype.replace; // 重写push|replace // 第一个参数：告诉原来push方法，往哪里跳转（传哪些参数） VueRouter.prototype.push = function (location, resolve, reject) { if (resolve && reject) { originPush.call(this, location, resolve, reject); } else { originPush.call(this, location, () => { }, () => { }); } } VueRouter.prototype.replace = function (location, resolve, reject) { if (resolve && reject) { originReplace.call(this, location, resolve, reject); } else { originReplace.call(this, location, () => { }, () => { }); } } // call和apply的区别 // 相同点；都可以调用函数一次，篡改函数的上下文一次 // 不同点：call与apply传递参数：call用逗号隔开，apply传递数组 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |