请教关于vue路由加载的问题。 - CNode技术社区
情况是这样的，在vue(2.0)中，是否可这样加载路由。比如说现在需要加载A页面(它是一个router-view)，而A页面中的一部分需要抽出为一个router-view
有点同时加载子路由的意思。
试过这样子的
{ path: '/',
components: {
default: Home,
test: Test
也试过这样子的
path: '/',
component: Home,
children: [
path: '',
test: Test
这2中情况是，A页面抽出来的router-view没有加载出来，查看源码显示注释符号。
因刚学vue，所以也不确定能不能这样。还请指点一二。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的请教下大家，Vue ，路由跳转前，怎么操作vuex ？ - VueClub
这家伙很懒，什么个性签名都没有留下。
微信扫码关注
QQ扫码快速入群
发布于 2年前
5166 次浏览
beforeRouteLeave 中读取 this.store.state
非常感谢，个人提的问题有点模糊了，想问的是路由被 confirm 前进行判断，使用beforeRouteEnter 通过传一个回调给next()解决了。
嗯嗯，思路最重要
恩，一般放在切换周期钩子中控制。文档(1.x) 有说明的：
Vue中文社区 独家公众号，面向前端爱好者， 每日更新最有料的文章，最前沿的资讯,内容包含但不限于Vue,React,Angular,前端工程化...等各种"大保健"知识点,右上角点关注,老司机带你弯道超车,不定期更有各种福利赠送
?? 亲,微信扫一扫奴家
服务器搭建在
存储赞助商为
声明：内容均来自于网络，如有侵权行为请发送邮件至,我们将在第一时间删除vue.js路由中怎么用iframe_百度知道
vue.js路由中怎么用iframe
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
super天气天枰
super天气天枰
采纳数：944
获赞数：268
&!DOCTYPE html&&html&&head&&meta charset=&utf-8&&&/head&&body&&div id=&app&&&h1&Hello App!&/h1&&p&&!-- 使用指令 v-link 进行导航。 --&&a v-link=&{ path: '/foo' }&&Go to Foo&/a&&a v-link=&{ path: '/bar' }&&Go to Bar&/a&&/p&&!-- 路由外链 --&&router-view&&/router-view&&/div&&script src=&&&&/script&&script src=&&&&/script&&script type=&text/javascript&&'use strict';Vue.use(VueRouter)// 定义组件var Foo = Vue.extend({props: ['src'],template: '&iframe :src=&src&&&/iframe&',route: {data: function (transition) {this.src = '' + transition.to.path}}})// 路由器需要一个根组件。// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板var App = Vue.extend({})// 创建一个路由器实例// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置var router = new VueRouter()// 定义路由规则// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend// 创建的组件构造函数，也可以是一个组件选项对象。// 稍后我们会讲解嵌套路由router.map({'/foo': {component: Foo},'/bar': {component: Foo}})// 现在我们可以启动应用了！// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。router.start(App, '#app')&/script&&/body&&/html&
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。404 Not Found
The requested URL /q/6672 was not found on this server.扫一扫体验手机阅读
Vue 项目里戳中你痛点的问题及解决办法
复制代码// 参数要写在data中
// swiper轮播的参数
swiperOption: {
scrollbar: {
el: '.swiper-scrollbar',
// 上一张，下一张
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
// 其他参数…………
},复制代码swiper需要配置哪些功能需求，自己根据文档进行增加或者删减。附上文档：npm文档，swiper3.0/4.0文档，更多用法，请参考文档说明。打包后生成很大的.map文件的问题项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 而生成的.map后缀的文件，就可以像未加密的代码一样，准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。但是我们在生成环境是不需要.map文件的，所以可以在打包时不生成这些文件：在config/index.js文件中，设置productionSourceMap: false,就可以不生成.map文件
fastClick的300ms延迟解决方案开发移动端项目，点击事件会有300ms延迟的问题。至于为什么会有这个问题，请自行百度即可。这里只说下常见的解决思路，不管vue项目还是jq项目，都可以使用fastClick解决。安装 fastClick:cnpm install fastclick -S复制代码在main.js中引入fastClick和初始化:import FastClick from 'fastclick'; // 引入插件
FastClick.attach(document.body); // 使用 fastclick复制代码组件中写选项的顺序为什么选项要有统一的书写顺序呢？很简单，就是要将选择和认知成本最小化。副作用 (触发组件外的影响)el全局感知 (要求组件以外的知识)nameparent组件类型 (更改组件的类型)functional模板修改器 (改变模板的编译方式)delimiterscomments模板依赖 (模板内使用的资源)componentsdirectivesfilters组合 (向选项里合并属性)extendsmixins接口 (组件的接口)inheritAttrsmodelprops/propsData本地状态 (本地的响应式属性)datacomputed事件 (通过响应式事件触发的回调)watch生命周期钩子 (按照它们被调用的顺序)beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeactivatedbeforeDestroydestroyed非响应式的属性 (不依赖响应系统的实例属性)methods渲染 (组件输出的声明式描述)template/renderrenderError查看打包后各文件的体积，帮你快速定位大文件如果你是vue-cli初始化的项目，会默认安装webpack-bundle-analyzer插件，该插件可以帮助我们查看项目的体积结构对比和项目中用到的所有依赖。也可以直观看到各个模块体积在整个项目中的占比。很霸道有木有~~npm run build --report // 直接运行，然后在浏览器打开http://127.0.0.1:8888/即可查看复制代码记得运行的时候先把之前npm run dev开启的本地关掉路由懒加载（也叫延迟加载）路由懒加载可以帮我们在进入首屏时不用加载过度的资源，从而减少首屏加载速度。路由文件中，非懒加载写法：import Index from '@/page/index/index';
export default new Router({
path: '/',
name: 'Index',
component: Index
})复制代码路由懒加载写法：export default new Router({
path: '/',
name: 'Index',
component: resolve => require(['@/view/index/index'], resolve)
})复制代码开启gzip压缩代码spa这种单页应用，首屏由于一次性加载所有资源，所有首屏加载速度很慢。解决这个问题非常有效的手段之一就是前后端开启gizp（其他还有缓存、路由懒加载等等）。gizp其实就是帮我们减少文件体积，能压缩到30%左右，即100k的文件gizp后大约只有30k。vue-cli初始化的项目中，是默认有此配置的，只需要开启即可。但是需要先安装插件：cnpm i compression-webpack-plugin复制代码然后在config/index.js中开启即可:build: {
// 其他代码
productionGzip: true, // false不开启gizp，true开启
// 其他代码
}复制代码现在打包的时候，除了会生成之前的文件，还是生成.gz结束的gzip过后的文件。具体实现就是如果客户端支持gzip，那么后台后返回gzip后的文件，如果不支持就返回正常没有gzip的文件。**注意：这里前端进行的打包时的gzip，但是还需要后台服务器的配置。配置是比较简单的，配置几行代码就可以了，一般这个操作可以叫运维小哥哥×××姐去搞一下，没有运维的让后台去帮忙配置。详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷新数据的实践
这样一个场景：有三个页面，首页/或者搜索页，商品分类页面，商品详情页。我们希望从首页进入分类页面时，分类页面要刷新数据，从分类进入详情页再返回到分类页面时，我们不希望刷新，我们希望此时的分类页面能够缓存已加载的数据和自动保存用户上次浏览的位置。之前在百度搜索的基本都是keep-alive处理的，但是总有那么一些不完善，所以自己在总结了之后进行了如下的实践。解决这种场景需求我们可以通过vue提供的keepAlive属性。这里直接送上另一篇处理这个问题的传送门吧
CSS的coped私有作用域和深度选择器大家都知道当 复制代码编译后：复制代码上述代码将会编译成：.parent[data-v-f3f3eg9] .child {
}复制代码而对于less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>操作符，例如：.parent /deep/ .child { /* ... */ }==================================后面会继续更新：restful路由设计axios封装和api接口的统一管理hiper打开速度测试postcss在vue中的使用和相关插件porp双向数据流的实践vue插件的开发vue开发公众号时接入微信jssdk，jssdk接口项目的坑和封装vue不同需求的登录流程的实践vue骨架屏的实现vue页面切换动画相关的实践vue中css、js代码的提取和去除冗余
<span type="1" blog_id="2157074" userid='
71篇文章，10W+人气，0粉丝
企业级网安运维
￥51.0029人订阅
鸟瞰Web应用开发
￥51.0019人订阅}