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">var</span> app3 = <span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">'#app-3'</span>,
data: {
seen: <span class="hljs-literal">true</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="app"> {{<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>}} </div>
<p><button onclick="test()">挂载</button><br />
<script><br />
var obj= {name: '张三'}<br />
var vm = new Vue({<br />
data: obj<br />
})<br />
function test() {<br />
vm.$mount("#app");<br />
}" title="" data-original-title="复制"></span>
</div>
</p></div>
<pre class="hljs xml"><code>// 可以实现延迟按需挂载
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span> {{name}} <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"test()"</span>></span>挂载<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></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">function</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">'<p>{{message}}</p>'</span>,
data: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</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="top" data-clipboard-text="
<p>
<!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} --><br />
<!-- 跳转路由时用this.$router: this.$router.push({name:"login",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="{name:'login',params: {isLogin: true}}">亲，请登录</router-link><br />
<router-link :to="{name:'login',params: {isLogin: false}}">免费注册</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"><<span class="hljs-name">p</span>></span>
<span class="hljs-comment"><!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} --></span>
<span class="hljs-comment"><!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); --></span>
<span class="hljs-comment"><!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --></span>
<span class="hljs-tag"><<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{name:'login',params: {isLogin: true}}"</span>></span>亲，请登录<span class="hljs-tag"></<span class="hljs-name">router-link</span>></span>
<span class="hljs-tag"><<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"{name:'login',params: {isLogin: false}}"</span>></span>免费注册<span class="hljs-tag"></<span class="hljs-name">router-link</span>></span>
<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-comment"><!-- 路由出口, 路由匹配到的组件将渲染在这里 --></span>
<span class="hljs-tag"><<span class="hljs-name">router-view</span>></span><span class="hljs-tag"></<span class="hljs-name">router-view</span>></span></code></pre>
<hr>
<h3 id="articleHeader3">3、render:h=>h(App)的理解</h3>
<p>render:h=>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:‘<app/>’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果<br /> 前者识别<template>标签，后者直接解析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">'<App/>'</span>, // <span class="hljs-number">1</span>、可以通过在 <span class="hljs-number">#a</span>pp 内加入<app></app>替代 <span class="hljs-number">2</span>、或者 通过 render: h => <span class="hljs-built_in">h</span>(App) 渲染一个视图，然后提供给el挂载
components: { // vue2中可以通过 render: h => <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 /> 在同一事件循环中的数据变化后，DOM完成更新，立即执行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 /> 同步代码执行 -> 查找异步队列，推入执行栈，执行c<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>back1[事件循环1] ->查找异步队列，推入执行栈，执行callback2[事件循环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.someObject, <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.assign(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"><<span class="hljs-name">style</span>></span><span class="css">
<span class="hljs-comment">/* 全局样式 */</span>
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>></span><span class="css">
<span class="hljs-comment">/* 本地样式 */</span>
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></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 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：</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"><<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>></span><span class="css">
<span class="hljs-selector-class">.a</span> >>> <span class="hljs-selector-class">.b</span> { <span class="hljs-comment">/* ... */</span> }
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
// 上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }</code></pre>
<p>有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。</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">const</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">/* ,hidden: 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 => item.name) */</span>
meta: {
keepAlive: <span class="hljs-literal">false</span>, <span class="hljs-comment">/* 用于在 <keep-alive> 中使用，判断是否需要进行缓存 */</span>
auth: <span class="hljs-literal">true</span>, <span class="hljs-comment">/* 自定义属性，用于判断是否进行校验,在router.beforeEach中使用 */</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>) =></span> {<span class="hljs-comment">// 注册一个全局前置守卫</span>
<span class="hljs-keyword">if</span> (to.meta.title) { <span class="hljs-comment">// 路由发生变化修改页面title</span>
<span class="hljs-built_in">document</span>.title = to.meta.title;
}
<span class="hljs-keyword">if</span> (to.matched.some(<span class="hljs-function"><span class="hljs-params">m</span> =></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">else</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">export</span> <span class="hljs-keyword">default</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><img v-b<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d:src="imgUrl"/></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="content"<br />
<!-- 界面中引入 --><br />
<img v-bind:src="imgUrl"/>
</div>
<p></template></p>
<p>// js中设置的路径<br />
<script type="text/ecmascript-6"><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><template>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>
<!<span class="hljs-attr">--</span> 界面中引入 <span class="hljs-attr">--</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">v-bind:src</span>=<span class="hljs-string">"imgUrl"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">template</span>></span></span>
<span class="hljs-comment">// js中设置的路径</span>
<script type=<span class="hljs-string">"text/ecmascript-6"</span>>
<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&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>
