脚本宝典收集整理的这篇文章主要介绍了

VUE 相关问题积累

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">VUE问题积累</h2> <h3 id="articleHeader1">1、组件三种挂载方式</h3> <ul> <li>自动挂载</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var app3 = new Vue({ el: '#app-3', data: { seen: true } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> app3 = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: <span class="hljs-string">'#app-3'</span>, data: { seen: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span> } })</code></pre> <ul> <li>手动挂载</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="// 可以实现延迟按需挂载</p> <div id=&quot;app&quot;> {{<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>}} </div> <p><button onclick=&quot;test()&quot;>挂载</button><br /> <script><br /> var obj= {name: '张三'}<br /> var vm = new Vue({<br /> data: obj<br /> })<br /> function test() {<br /> vm.$mount(&quot;#app&quot;);<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>// 可以实现延迟按需挂载 <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> {{<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a></span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/onclick" title="浏览关于“onclick”的文章" target="_blank" class="tag_link">onclick</a></span>=<span class="hljs-string">"test()"</span>&gt;</span>挂载<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> obj= {name: <span class="hljs-string">'张三'</span>} <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ data: obj }) <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-title">test</span><span class="hljs-params">()</span> </span>{ vm.$mount(<span class="hljs-string">"#app"</span>); }</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="// <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend()创建没有挂载的的子类,可以使用该子累创建多个实例<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> app= <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend({<br /> template: '</p> <p>{{message}}</p> <p>',<br /> data: function () {<br /> return {<br /> message: 'message'<br /> }<br /> }<br /> })<br /> new app().$mount('#app') // 创建 app实例,并挂载到一个元素上" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-comment">// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例</span> <span class="hljs-keyword">var</span> app= Vue.extend({ template: <span class="hljs-string">'&lt;p&gt;{{message}}&lt;/p&gt;'</span>, data: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { message: <span class="hljs-string">'message'</span> } } }) <span class="hljs-keyword">new</span> app().$mount(<span class="hljs-string">'#app'</span>) <span class="hljs-comment">// 创建 app实例,并挂载到一个元素上</span></code></pre> <hr> <h3 id="articleHeader2">2、路由传递参数的方式</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>=" </p> <p> <!-- query要用path来引入,params要用name来引入,故不能写为 :to=&quot;{path:'/login',params: {isLogin: true}} --><br /> <!-- 跳转路由时用this.$router: this.$router.push({name:&quot;login&quot;,params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); --><br /> <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --><br /> <router-link :to=&quot;{name:'login',params: {isLogin: true}}&quot;>亲,请登录</router-link><br /> <router-link :to=&quot;{name:'login',params: {isLogin: false}}&quot;>免费注册</router-link> </p> <p> <!-- 路由出口, 路由匹配到的组件将渲染在这里 --><br /> <router-view></router-view>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span> <span class="hljs-comment">&lt;!-- query要用path来引入,params要用name来引入,故不能写为 :to="{path:'/log<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>',params: {isLogin: true}} --&gt;</span> <span class="hljs-comment">&lt;!-- 跳转路由时用<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); --&gt;</span> <span class="hljs-comment">&lt;!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-<a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{name:'login',params: {isLogin: true}}"</span>&gt;</span>亲,请登录<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{name:'login',params: {isLogin: <a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a>}}"</span>&gt;</span>免费注册<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-comment">&lt;!-- 路由出口, 路由匹配到的组件将渲染在这里 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></code></pre> <hr> <h3 id="articleHeader3">3、render:h=&gt;h(App)的理解</h3> <p>render:h=&gt;h(App)是ES6中的<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>写法,等价于render:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(h){<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> h(App);}.</p> <p>1.<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>中的<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>是 指向 包裹<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>所在函数外面的对象上。</p> <p>2.h是creatElement的别名,vue生态系统的通用管理</p> <p>3.template:‘&lt;app/&gt;’,components:{App}配合使用与单独使用render:h=&gt;h(App)会达到同样的效果<br />  前者识别&lt;template&gt;标签,后者直接解析template下的id为app的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>(忽略template的存在)</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({<br /> el: '#app', // 相当于 <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({}).$mount('#app');<br /> template: '<App></span>', // 1、可以通过在 #app 内加入<app></app>替代 2、或者 通过 render: h => h(App) 渲染一个视图,然后提供给el挂载<br /> components: { // vue2中可以通过 render: h => h(App) 渲染一个视图,然后提供给el挂载<br /> App<br /> }<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Vue</span>({ <span class="hljs-attribute">el</span>: <span class="hljs-string">'#app'</span>, // 相当于 new <span class="hljs-built_in">Vue</span>({}).$<span class="hljs-built_in">mount</span>(<span class="hljs-string">'#app'</span>); <span class="hljs-attribute">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, // <span class="hljs-number">1</span>、可以通过在 <span class="hljs-number">#a</span>pp 内加入&lt;app&gt;&lt;/app&gt;替代 <span class="hljs-number">2</span>、或者 通过 render: h =&gt; <span class="hljs-built_in">h</span>(App) 渲染一个视图,然后提供给el挂载 components: { // vue2中可以通过 render: h =&gt; <span class="hljs-built_in">h</span>(App) 渲染一个视图,然后提供给el挂载 App } });</code></pre> <hr> <h3 id="articleHeader4">4、Vue.nextTick()的理解</h3> <p>与<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>相关操作写在该函数回调中,确保<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>已渲染<br /><strong>nextTick的由来:</strong><br />    由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。<br />    <br /><strong>nextTick的触发时机:</strong><br />    在同一事件循环中的数据变化后,<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>完成更新,立即执行nextTick(c<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>back)内的回调。<br />    <br /><strong>应用场景:</strong><br />    需要在视图更新之后,基于新的视图进行操作。</p> <ol> <li>在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。</li> <li>在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。</li> </ol> <p><strong>简单总结事件循环:</strong><br />    同步代码执行 -&gt; 查找异步队列,推入执行栈,执行c<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>back1[事件循环1] -&gt;查找异步队列,推入执行栈,执行c<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>back2[事件循环2]...即每个异步callback,最终都会形成自己独立的一个事件循环。结合nextTick的由来,可以推出每个事件循环中,nextTick触发的时机:</p> <h2>        </h2> <h3 id="articleHeader6">5、动态属性添加</h3> <blockquote><p><a href="https://cn.vuejs.org/v2/guide/reactivity.html" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide...</a></p></blockquote> <p>受现代 JavaScript 的限制 (以及废弃 <a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。例如:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var vm = new Vue({ data:{ a:1 } }) // `vm.a` 是响应的 vm.b = 2 // `vm.b` 是非响应的" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> <span class="hljs-type">Vue</span>({ data:{ a:<span class="hljs-number">1</span> } }) <span class="hljs-comment">// `vm.a` 是响应的</span> vm.b = <span class="hljs-number">2</span> <span class="hljs-comment">// `vm.b` 是非响应的</span></code></pre> <p>Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.set(vm.someObject, 'b', 2)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">Vue.<span class="hljs-keyword">set</span>(vm.some<a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>, <span class="hljs-string">'b'</span>, <span class="hljs-number">2</span>)</code></pre> <p>您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="this.$set(this.someObject,'b',2)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">this</span>.$<span class="hljs-keyword">set</span>(<span class="hljs-keyword">this</span>.someObject,<span class="hljs-string">'b'</span>,<span class="hljs-number">2</span>)</code></pre> <p>有时你想向已有对象上添加一些属性,例如使用 <a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>.<a href="http://www.js-code.com/tag/assign" title="assign" target="_blank">assign</a>() 或 _.extend() 方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-comment">// 代替 `Object.<a href="http://www.js-code.com/tag/assign" title="浏览关于“assign”的文章" target="_blank" class="tag_link">assign</a>(this.someObject, { a: 1, b: 2 })`</span> <span class="hljs-keyword">this</span>.someObject = Object.assign({}, <span class="hljs-keyword">this</span>.someObject, { <span class="hljs-string">a:</span> <span class="hljs-number">1</span>, <span class="hljs-string">b:</span> <span class="hljs-number">2</span> })</code></pre> <hr> <h3 id="articleHeader7">6、样式渗透到子组件</h3> <p>你可以在一个组件中同时使用有作用域和无作用域的样式:</p> <blockquote><p>深度作用选择器 <a href="https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B9%E5%85%83%E7%B4%A0" rel="nofollow noreferrer" target="_blank">https://vue-loader.vuejs.org/...</a> </p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-comment">/* 全局样式 */</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-comment">/* 本地样式 */</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p><strong>子组件的根元素:</strong>使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 和子组件有作用域的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。</p> <p><strong>深度作用选择器:</strong>如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 &gt;&gt;&gt; 操作符:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <style scoped> .a >>> .b { /* ... */ } </style> <p>// 上述代码将会编译成:<br /> .a[data-v-f3f3eg9] .b { /* ... */ }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.a</span> &gt;&gt;&gt; <span class="hljs-selector-class">.b</span> { <span class="hljs-comment">/* ... */</span> } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> // 上述代码将会编译成: .a[data-v-f3f3eg9] .b { /* ... */ }</code></pre> <p>有些像 Sass 之类的预处理器无法正确解析 &gt;&gt;&gt;。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 &gt;&gt;&gt; 的别名,同样可以正常工作。</p> <hr> <h3 id="articleHeader8">7、路由控制title及权限</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue'; import Router from 'vue-router'; import store from 'src/vuex/store.js'; Vue.use(Router); const router = new Router({ routes: [ { path: '/login', /* 登录界面 */ name: 'login', component: login/* ,hidden: true, // 自定义属性,在组件中可以通过 this.$route.hidden 获取值 */ }, { path: '/sysSetting', /* 首页 */ component: sysSetting, name: 'sysSetting', /* this.$route.matched.filter(item => item.<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>) */<br /> meta: {<br /> keepAlive: <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>, /* 用于在 <keep-alive> 中使用,判断是否需要进行缓存 */<br /> auth: true, /* 自定义属性,用于判断是否进行校验,在router.beforeEach中使用 */<br /> title: '系统设置' /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */<br /> }<br /> },<br /> {<br /> path: '*', /* 默认跳转到登录界面 */<br /> redirect: {path: '/sysSetting'}<br /> }<br /> ]<br /> });</p> <p>router.beforeEach((to, from, next) => {// 注册一个全局前置守卫<br /> if (to.meta.title) { // 路由发生变化修改页面title<br /> document.title = to.meta.title;<br /> }</p> <p> if (to.matched.some(m => m.meta.auth)) {// 判断是否需要校验<br /> if (store.state.isLogin) {// 获取<br /> next();// 校验通过,正常跳转到你设置好的页面<br /> } else {<br /> next({// 校验失败,跳转至登录界面<br /> path: '/login',<br /> query: {<br /> redirect: to.fullPath<br /> }// 将跳转的路由path作为参数,用于在登录成功后获取并跳转到该路径<br /> });<br /> }<br /> } else {<br /> next();// 不需要校验,直接跳转<br /> }<br /> });</p> <p>export default router;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>; <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span>; <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'src/vuex/store.js'</span>; Vue.use(Router); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> router = <span class="hljs-keyword">new</span> Router({ routes: [ { path: <span class="hljs-string">'/login'</span>, <span class="hljs-comment">/* 登录界面 */</span> name: <span class="hljs-string">'login'</span>, component: login<span class="hljs-comment">/* ,<a href="http://www.js-code.com/tag/hidden" title="浏览关于“hidden”的文章" target="_blank" class="tag_link">hidden</a>: true, // 自定义属性,在组件中可以通过 this.$route.hidden 获取值 */</span> }, { path: <span class="hljs-string">'/sysSetting'</span>, <span class="hljs-comment">/* 首页 */</span> component: sysSetting, name: <span class="hljs-string">'sysSetting'</span>, <span class="hljs-comment">/* this.$route.matched.filter(item =&gt; item.name) */</span> meta: { keepAlive: <span class="hljs-literal">false</span>, <span class="hljs-comment">/* 用于在 &lt;keep-alive&gt; 中使用,判断是否需要进行缓存 */</span> auth: <span class="hljs-literal">true</span>, <span class="hljs-comment">/* 自定义属性,用于判断是否进行校验,在router.be<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>eEach中使用 */</span> title: <span class="hljs-string">'系统设置'</span> <span class="hljs-comment">/* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */</span> } }, { path: <span class="hljs-string">'*'</span>, <span class="hljs-comment">/* 默认跳转到登录界面 */</span> redirect: {path: <span class="hljs-string">'/sysSetting'</span>} } ] }); router.beforeEach(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>) =&gt;</span> {<span class="hljs-comment">// 注册一个全局前置守卫</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (to.meta.title) { <span class="hljs-comment">// 路由发生变化修改页面title</span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.title = to.meta.title; } <span class="hljs-keyword">if</span> (to.matched.some(<span class="hljs-function"><span class="hljs-params">m</span> =&gt;</span> m.meta.auth)) {<span class="hljs-comment">// 判断是否需要校验</span> <span class="hljs-keyword">if</span> (store.state.isLogin) {<span class="hljs-comment">// 获取</span> next();<span class="hljs-comment">// 校验通过,正常跳转到你设置好的页面</span> } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { next({<span class="hljs-comment">// 校验失败,跳转至登录界面</span> path: <span class="hljs-string">'/login'</span>, query: { redirect: to.fullPath }<span class="hljs-comment">// 将跳转的路由path作为参数,用于在登录成功后获取并跳转到该路径</span> }); } } <span class="hljs-keyword">else</span> { next();<span class="hljs-comment">// 不需要校验,直接跳转</span> } }); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> router;</code></pre> <hr> <h3 id="articleHeader9">8、嵌套路由及命名视图</h3> <blockquote><p><a href="https://router.vuejs.org/zh-cn/essentials/named-views.html" rel="nofollow noreferrer" target="_blank">https://router.vuejs.org/zh-c...</a></p></blockquote> <hr> <h3 id="articleHeader10">9、页面路由进度条</h3> <blockquote><p><a href="http://hilongjw.github.io/vue-progressbar/" rel="nofollow noreferrer" target="_blank">http://hilongjw.github.io/vue...</a></p></blockquote> <hr> <h3 id="articleHeader11">10、静态资源路径</h3> <p><strong>问题描述</strong>:<code>&lt;img v-b<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d:src="imgUrl"/&gt;</code> 绑定的资源请求失败</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> <<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> class=&quot;content&quot;<br /> <!-- 界面中引入 --><br /> <img v-bind:src=&quot;imgUrl&quot;/> </div> <p></template></p> <p>// js中设置的路径<br /> <script type=&quot;text/ecmascript-6&quot;><br /> export default {<br /> data () {<br /> return {<br /> imgUrl : './logo.png' // 此处路径引入错误<br /> };<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>&lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span> &lt;!<span class="hljs-attr">--</span> 界面中引入 <span class="hljs-attr">--</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-bind:src</span>=<span class="hljs-string">"imgUrl"</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span> <span class="hljs-comment">// js中设置的路径</span> &lt;script type=<span class="hljs-string">"text/ecmascript-6"</span>&gt; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">imgUrl</span> : <span class="hljs-string">'./logo.png'</span> <span class="hljs-comment">// 此处路径引入错误</span> }; } }</code></pre> <p><strong>原因分析:</strong>在上面代码中文件的路径是相对于项目文件目录的,而网页把根域名作为相对路径的根目录(npm run build 生成),并且所有的文件名后都被添加上了一个随机字符串。结构目录如下如下:</p> <p><span class="img-wrap"><img data-src="/img/bV81q1?w=491&amp;h=224" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><strong>解决办法:</strong>图片一类的静态文件,应该放在这个<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a>文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a>绝对路径,就可以访问这些静态文件了。</p> <hr></code></p>

总结

以上是脚本宝典为你收集整理的

VUE 相关问题积累

全部内容,希望文章能够帮你解决

VUE 相关问题积累

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过