创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一、路由相关点
1. 路由跳转传参以及接参
https://segmentfault.com/a/1190000012393587
方法一:
(1) 参数配置:
{ path : 'xx/:参数变量',component:xx}
(2) 使用
<router-link to='xx/参数'></router-link>
(3) 传参
<router-link to='xx/参数?a=1&b=2'></router-link>
(4) 获取参数
this.$route.params
this.$route.query
方法二:
(1)参数配置
{ path : 'xx/:参数变量A',component:xx}
(2) 使用及传参
<router-link to='{name:'xx',params:{参数变量A:值},query:{}}'></router-link>
(3) 获取参数
this.$route.params
this.$route.query
注意:name 中的 ‘xx’ 是 router 配置中的 name 值,params 中的参数变量要与 router 配置中 path 的 参数变量一致,query 是要传的参数,相当于 a=1&b=2
方法三:
(1) 使用及传参
this.$router.push({path: '/propertyInfo/mall/mallList',// name: 'mallList',query: {mallCode: 'M000989'}})
(2)获取参数:
this.$route.query
2. keep-alive
keep-alive 会记录缓存,若不想被记录缓存,可以将生命函数钩子替换为: activated() 钩子。
例如:直接在 created 中写 console.log ,它在第一次进入这个页面时会被打印,后面将不会再打印出来
将 created 替换成 activated 后,每次进入该页面,该页面都将清楚缓存(有点类似 F5 刷新)
3. router-view
若果像注释那样写,将会在页面上渲染出3个相同的组件,调用接口时,将会被多次调用。
解决办法: 在后面写一个router-view就好了
<keep-alive><router-view />
</keep-alive>
产生的问题是,渲染出来的DOM结构与 tabs 不是父子关系,而是兄弟关系。
上面的问题可以使用组件解决
注意: 因为是在同一个父组件中,tabs 之间如果要路由跳转,可以使用命名视图。
4. 命名视图
https://router.vuejs.org/zh/guide/essentials/named-views.html
路由官网: https://router.vuejs.org/zh/
(1) 使用方法:可作为页面的二级页面-详情页
修正一下: 命名视图并不会替换与它 router-view 同级的所有dom
(3) 路由配置:
二、路由进阶 - 路由守卫
vue-Router文档
导航守卫的三种实现方法:全局守卫、路由独享的守卫、组件内的守卫
前置守卫: 判断用户是否登录,如登录就可以进入用户页,否则阻止用户进入用户页。登录之后跳到用户页
后置守卫: 在某一个页面输入一系列信息之后,用户失误点击了跳转到另外一个页面,再跳转到该页面,此时用户之前输入的信息将会被清空。后置守卫是为了用户输入信息后未保存就跳转页面时,信息不会被清空
1. 全局前置守卫:beforeEach 、afterEach
//在 main.js中router.beforeEach(to,form,next) =>{//to: 即将要进入的目标 路由//from : 当前导航正要离开的路由//next(): 让from->to这一过程执行完,如果不写next(),就相当于执行了next(false)//next(false): 中断 from-> to 这一过程
})
router.afterEach((to, from) => {// ...
})
2. 路由独享守卫: beforeEnter、afterEnter
在路由配置上直接定义,只有该路由会被守卫
routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}
]
//或者
let userIn = (to, from, next) => {// ...
}
routes: [{path: '/foo',component: Foo,beforeEnter: userIn}]
3. 组件内的守卫: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
组件内的守卫 在组建中的 export default{}
中
三、插槽
如在 header 组件中添加插槽
使用:
效果:
四、打包小细节
找到 routers 文件夹下的 index.js 中替换掉原来的 base 为
base:"名称"
vue.config.js配置中添加
publicPath : '/名称'
,
如果还是打不开,在该项目下 “以管理员身份” 打开 cmd ,安装
npm install http-server -g
,然后进入 cd dist 文件夹,输入 http-server
用任意一个地址 + /index.html 打开,例如这里我用http://127.0.0.1:8080/index.html
(1) 如果 http-server 安装不成功,检查是否是在 管理员身份 下运行,必须在管理员身份下才能运行。
(2)http-server 不是内部命令的问题:在cmd 上输入npm config ls
,检查npm 的安装路径,复制 prefix 中的路径,把它添加到 环境变量中,注意环境变量中只有一个 \
(3)怎么配置环境变量:如下图方式打开
属性->高级系统设置->高级->环境变量 ->path ->编辑
http-server 后还报404?配 nginx
https://blog.csdn.net/qq_35437791/article/details/97271373打包后如果想继续查看项目,记得注释掉 publick:"./",否则会报错,报错如下
创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节相关推荐
- 六十九、完成Vue项目城市选择页,路由配置,搜索框布局、列表布局、BetterScroll 的使用和字母表布局
2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- 路由相关知识,静态路由、默认路由、浮动路由的概念以及基本设置
路由相关知识,静态路由.默认路由.浮动路由的概念以及基本设置 选取最佳路由时的标准 路由表 路由表的形成 静态路由概念 静态路由的优点和缺点 默认路由 浮动路由 路由协议分类 静态路由.默认路由.浮动 ...
- 前端-可视化创建vue项目
注:以下操作是在已安装脚手架的基础上进行(如果出现可视化创建vue项目失败的情况,可能是脚手架版本的问题,建议安装更高版本的脚手架) 一.打开可视化界面 第一步,视窗键+R,打开"运行&qu ...
- Vue-cli创建Vue项目工程步骤详解
Vue-cli 即:Vue脚手架.官方网址:vue-cli官网 本篇文章以我经常创建Vue项目工程的步骤为例,带着大家一步一步创建一个全新的vue项目工程.文章会详细讲解Vue脚手架创建项目的每一个步 ...
- vue-cli创建vue项目详细步骤
一.安装node环境(建议使用LTS) Download | Node.js 二.下载vue和vue-cli脚手架 命令:npm i -g vue ; npm i -g @vue/cli 三.在想要创 ...
- ui vue 创建项目教程 并关闭语法_创建vue项目流程
创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目. (1)安装 确认已安装了node.js ...
- vue使用命令行构建完项目后_通过命令行创建vue项目的方法
通过命令行创建vue项目的方法 最近想要学习vue,正好看到资料,如何通过命令创建vue项目的方法,就留个笔记 环境要求: 安装有 Node.js. vue.vue-cli . 创建项目: vue i ...
- 创建vue项目+总结使用(跨域问题+vue 创建)
创建vue项目: -安装node.js-vue脚手架-vue create 项目名字pycharm开发vue项目-需要安装vue.js插件-setting--->plugins--->左下 ...
- 创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件(.vue,js代码等)
下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件 一.引入elementUi 顺便一提axios使用说明 和axios在vu ...
最新文章
- opengl中的Floatbuffer和IntBuffer与java中数据的存储方式不同的解决方法,编辑一个自己的BufferUtil工具类
- 微软官方宣布:Edge 浏览器将采用 Chromium 内核
- 交换机的硬件故障问题总结
- Jacobian 和Hessian矩阵
- lan口配置 petalinux_PetaLinux开发文档
- 《企业迁云实战》——1.3 云服务的发展现状
- 《1024伐木累》-屌丝、快播、苍老师
- 为civil3D2018 添加snoop DB工具
- Spring5学习笔记------4、JdbcTemplate
- C语言求水仙花数(自幂数)
- oracle查看表空间的属性 ,修改表空间的状态
- 安装 Ubuntu 操作系统步骤教程
- python 整合_python的资源整合
- 《Android平台开发之旅》学习笔记
- CCF- CSP 202012-5星际旅行 80分骗分题解
- win7系统怎么调亮度_win7系统怎么打开vsd文件 win7系统打开vsd文件步骤【图文】...
- Docker启动Elastic Search报错 ERROR: [1] bootstrap checks failed
- mmap/munmap函数详解
- 如何辨别盗版windows 7
- BCGControlBar使用工具教程