摘要:
一、概念 1、对与url来说 # 后面的内容就是hash值 2、hash值不包含在http请求中,即:hsah值不会带给服务器 3、hash模式 a、地址不美观带有# b、地址可能会被校验不合法 c、兼容性好 4、histroy模式 a、地址干净、整洁 b、兼容性比hash模式差 c、部署需要解决服 阅读全文
摘要:
1、顺序 2、位置 组件内部 3、语法 beforeRouteEnter 通过路由规则,进入该组件时被调佣 beforeRouteLeave通过路由规则,离开该组件时被调用 注意:通过组件引入不被调用 beforeRouteEnter (to, from, next) { // ... consol 阅读全文
摘要:
1、位置 src/router/index.js 写在路由中 2、顺序 在全局 前置守卫 执行后执行 2、语法 { path:'news', component: NewsData, meta:{isAuth:true, title:'新闻'}, beforeEnter: (to, from, ne 阅读全文
摘要:
一、位置 src/router/index.js const router = new VueRouter({ routes:[ ] }) // 这个地方写全局前置路由守卫或 全局后置路由守卫 export default router 一、全局前置路由守卫 1、时间:初始化时被调用,每次切换前被调 阅读全文
摘要:
1、作用 路由独有的两个生命周期函数,用于捕获路由组件的激活状态,激活路由调用 2、功能, 只有 组件被 keep-alive 包裹时才能生效 activated路由组件被激活时调用 activated(){} deactivated路由组件失活时调用 deactivated(){} 阅读全文
摘要:
路由切换,组件自动销毁,想要保留A组件的数据,需要确认A组件路由所在的组件,在该组件中包<router-view> <keep-alive include="NewsData"> <router-view></router-view> </keep-alive> include=组件名称 不写inc 阅读全文
摘要:
一、作用 不借助<router-link>实现路由跳转 二、路由 (push replace) 借助 $router 的push(保存浏览记录) 和replace(替换浏览记录) 与 query和params对象传参类似 1、push 触发 <button @click="pushShow(m)"> 阅读全文
摘要:
1、作用 控制路由跳转时操作浏览器历史记录的模式 2、两种 push:追加历史记录 replace:替换历史记录 默认为 push 3、设置 添加 replace 属性 <router-link replace class="list-group-item" active-class="active 阅读全文
摘要:
1、作用 让路由组件便于接受参数 2、写法(三种) src/router/index.js a、简单 值为对象,通过props传递给组件,组件需要接受 { name:'detail', // params参数 需要占位符 path:'detail/:id/:title', component: De 阅读全文
摘要:
一、传递参数 1、路由(占位符) src/router/index.js children:[ { name:'detail', // params参数 需要占位符 path:'detail/:id/:title', component: DetailData }, ] 2、传递(对象) 注意:pa 阅读全文
摘要:
1、作用 简化多级路由 2、设置 src/router/index.js 在路由中添加 name 关键字 children:[ { name:'detail', path:'detail', component: DetailData }, ] 3、使用,配合传递参数,或者单个name关键字 to要 阅读全文
摘要:
一、传递参数 1、固定参数 <router-link to="/home/message/detail?name=jojo&age=8">{{ m.title }}</router-link> 2、变化参数(对象写法) 关键字:path 路径(完整),query: 对象 <router-link : 阅读全文
摘要:
一、配置路由 关键字 children 注意 子路由 path 不加斜杠 src/router/index.js export default new VueRouter({ routes:[ { // path 是路径,component是组件 path: '/about', component: 阅读全文
摘要:
1、安装vue-router //Vue2 npm i vue-router@3 //vue3 npm i vue-router 2、使用VueRouter main.js // 引入VueRouter import VueRouter from "vue-router"; //使用 Vue.use 阅读全文
摘要:
1、在pbulic文件夹中创建css文件夹,并存入bootstrap.css文件 2、在index.html文件中引入 <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"> 阅读全文
摘要:
1、创建Js文件 每个组件单独一个js文件,在src/sore中 2、每个组件文件中,默认暴露,actions mutations state gettters namespaced:true export default { namespaced: true, actions:{}, mutati 阅读全文
摘要:
1、actions addPersonApi(context){ axios.get('https://random-data-api.com/api/name/random_name').then( response=>{ context.commit('ADD_PERSON', {id:nano 阅读全文
摘要:
一、模块化 1、几个组件定义几个对象 文件 src/store/index.js // 与count组件相关的optinos const countOptions = { actions:{}, mutations:{}, state:{}, getters:{} } // 与person组件 相关 阅读全文