<h1 id="articleHeader0">上节回顾</h1> <p>上节学习了如何用<code>webpack + vue-cli</code> 去安装一个基于vue基础项目框架,其实按照顺序来,本来是第九节应该是看组件的,不过因为种种原因,实在是受不了了,所以决定提前先把<code>webpack</code>关于<code>vue</code>的这门课先补上,所以说今天就来看组件吧!</p> <h1 id="articleHeader1">前言</h1> <p>因为前些天我已经看过组件这一张了,基础知识多少要有一点啦,所以这一节就基于目前已有的知识来写吧。</p> <p>首先这一节必须基于<code>vue-cli</code>生成的基架来学习。</p> <p>其次这里涉及到了一点<code>vue-router</code>路由的一点点知识。</p> <p>这里将通过<code>路由</code>与<code>.vue</code>单文件组件实现跳转。</p> <p>另外,同时从今天开始我也要同时开始学习<code>element-ui</code>的使用了,所以今天也要配合使用<code>element-ui</code></p> <h1 id="articleHeader2">本节目标</h1> <p>基于<code>element-ui</code> <code>vue-router</code> <code>.vue但页面组件</code> 实现页面跳转的Demo</p> <h1 id="articleHeader3">Element-ui</h1> <h2 id="articleHeader4">1.安装</h2> <p>在项目文件夹上打开<code>cmd</code>,执行:<code>npm i element-ui -S</code></p> <h2 id="articleHeader5">2.引入</h2> <p>打开<code>src</code>文件夹下的<code>main.js</code></p> <p>主要用到这三句话</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="import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> ElementUI <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'element-ui/lib/theme-chalk/index.css'</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.use(ElementUI)</code></pre> <p><code>main.js</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="import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> from 'vue'<br /> import ElementUI from 'element-ui'<br /> import 'element-ui/lib/theme-chalk/index.css'<br /> import App from './App'<br /> import router from './router'</p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(ElementUI)<br /> Vue.config.productionTip = false</p> <p>/* eslint-disable no-new */<br /> new Vue({<br /> el: '#app',<br /> router,<br /> components: { App },<br /> template: '<App></span>'<br /> })" 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> ElementUI <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'element-ui/lib/theme-chalk/index.css'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> Vue.use(ElementUI) Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, components: { App }, template: <span class="hljs-string">'&lt;App/&gt;'</span> })</code></pre> <p>现在可以在项目中使用<code>Element-ui</code>的组件了!</p> <h1 id="articleHeader6">1.创建组件</h1> <h2 id="articleHeader7">1.新建student-list.vue组件</h2> <p>1.首先说一下,组件一般都放在<code>src - components</code>目录下,所以说我们在<code>components</code>下新建一个文件夹,就叫做<code>student</code></p> <p>2.在<code>student</code>文件夹<code>右键</code> -&gt; <code>新建</code> -&gt; <code>Vue Component</code>,名字:<code>student-list</code>,如果不使用这个名字的话,下面的代码要相应的修改</p> <p>3.把下面代码粘进去...</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 /> <el-table :data=&quot;tableData&quot; stripe style=&quot;width: 100%&quot;><br /> <el-table-column prop=&quot;name&quot; label=&quot;姓名&quot; width=&quot;180&quot;><br /> </el-table-column><br /> <el-table-column prop=&quot;sex&quot; label=&quot;性别&quot; width=&quot;180&quot;><br /> </el-table-column><br /> <el-table-column prop=&quot;age&quot; label=&quot;年龄&quot;><br /> </el-table-column><br /> </el-table><br /> </template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'student-list', data () { return { tableData: [{ name: '张楚岚', sex: '男', age: '23' }, { name: '冯宝宝', sex: '女', age: '99' }, { name: '赵方旭', sex: '男', age: '59' }, { name: '肖自在', sex: '36', age: '男' } ] } } } </script></p> <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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-table</span> <span class="hljs-attr">:data</span>=<span class="hljs-string">"tableData"</span> <span class="hljs-attr">stripe</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-table-column</span> <span class="hljs-attr">prop</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"姓名"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"180"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-table-column</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-table-column</span> <span class="hljs-attr">prop</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"性别"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"180"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-table-column</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-table-column</span> <span class="hljs-attr">prop</span>=<span class="hljs-string">"age"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"年龄"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-table-column</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <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">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'student-list'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">tableData</span>: [{ <span class="hljs-attr">name</span>: <span class="hljs-string">'张楚岚'</span>, <span class="hljs-attr">sex</span>: <span class="hljs-string">'男'</span>, <span class="hljs-attr">age</span>: <span class="hljs-string">'23'</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'冯宝宝'</span>, <span class="hljs-attr">sex</span>: <span class="hljs-string">'女'</span>, <span class="hljs-attr">age</span>: <span class="hljs-string">'99'</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'赵方旭'</span>, <span class="hljs-attr">sex</span>: <span class="hljs-string">'男'</span>, <span class="hljs-attr">age</span>: <span class="hljs-string">'59'</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'肖自在'</span>, <span class="hljs-attr">sex</span>: <span class="hljs-string">'36'</span>, <span class="hljs-attr">age</span>: <span class="hljs-string">'男'</span> } ] } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <h2 id="articleHeader8">2.新建student-add.vue组件</h2> <p>方式同上,也放在<code>student</code>文件夹下,名字:<code>student-add</code></p> <p>完整代码:</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 /> <el-form ref=&quot;form&quot; :model=&quot;student&quot; label-width=&quot;80px&quot;></p> <p> <el-form-item label=&quot;姓名&quot;><br /> <el-input v-model=&quot;student.name&quot;></el-input><br /> </el-form-item></p> <p> <el-form-item label=&quot;性别&quot;><br /> <el-radio-group v-model=&quot;student.sex&quot;><br /> <el-radio label=&quot;1&quot;>男</el-radio><br /> <el-radio label=&quot;2&quot;>女</el-radio><br /> </el-radio-group><br /> </el-form-item></p> <p> <el-form-item label=&quot;年龄&quot;><br /> <el-input v-model.number=&quot;student.age&quot; type=&quot;number&quot;></el-input><br /> </el-form-item></p> <p> <el-form-item><br /> <el-button plain>添加</el-button><br /> <el-button plain @click=&quot;onBack&quot;>返回</el-button><br /> </el-form-item><br /> </el-form><br /> </template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'student-add', data () { return { student: { name: '', sex: '1', age: 0 } } }, methods: { onBack () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$router.back() } } } </script></p> <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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-form</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"form"</span> <span class="hljs-attr">:model</span>=<span class="hljs-string">"student"</span> <span class="hljs-attr">label-width</span>=<span class="hljs-string">"80px"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-form-item</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"姓名"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-input</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"student.name"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-input</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-form-item</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-form-item</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"性别"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-radio-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"student.sex"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-radio</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"1"</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">el-radio</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-radio</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"2"</span>&gt;</span>女<span class="hljs-tag">&lt;/<span class="hljs-name">el-radio</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-radio-group</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-form-item</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-form-item</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"年龄"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-input</span> <span class="hljs-attr">v-model.number</span>=<span class="hljs-string">"student.age"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-input</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-form-item</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-form-item</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">plain</span>&gt;</span>添加<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">plain</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onBack"</span>&gt;</span>返回<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-form-item</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-form</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'student-add'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">student</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">sex</span>: <span class="hljs-string">'1'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">0</span> } } }, <span class="hljs-attr">methods</span>: { onBack () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$router.back() } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <h2 id="articleHeader9">3.新建frame.vue组件</h2> <p>1.在<code>components</code>文件夹上<code>右键</code>,新建<code>vue</code>组件,名称:<code>frame</code></p> <p>2.完整代码:</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 /> <el-container><br /> <el-header><br /> <el-menu class=&quot;el-menu-demo&quot; mode=&quot;horizontal&quot; background-color=&quot;#545c64&quot; text-color=&quot;#fff&quot; active-text-color=&quot;#ffd04b&quot;><br /> <el-submenu index=&quot;1&quot;><br /> <template slot=&quot;title&quot;>学员管理</template><br /> <el-menu-item index=&quot;1-1&quot;><router-link to=&quot;/student/list&quot; tag=&quot;div&quot;>学员列表</router-link></el-menu-item><br /> <el-menu-item index=&quot;1-2&quot;><router-link to=&quot;/student/add&quot; tag=&quot;div&quot;>添加学员</router-link></el-menu-item><br /> </el-submenu><br /> </el-menu><br /> </el-header><br /> <el-main><br /> <router-view></router-view><br /> </el-main><br /> </el-container></p> <p></template></p> <p><script> import studentAdd from './student/student-add' import studentList from './student/student-list'</p> <p>export default { name: 'frame', components: { studentAdd, studentList } } </script></p> <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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-container</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-header</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-menu</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-menu-demo"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"horizontal"</span> <span class="hljs-attr">background-color</span>=<span class="hljs-string">"#545c64"</span> <span class="hljs-attr">text-color</span>=<span class="hljs-string">"#fff"</span> <span class="hljs-attr">active-text-color</span>=<span class="hljs-string">"#ffd04b"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-submenu</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"1"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>&gt;</span>学员管理<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"1-1"</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">"/student/list"</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</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">el-menu-item</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"1-2"</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">"/student/add"</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"div"</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">el-menu-item</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-submenu</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-menu</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-header</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-main</span>&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> <span class="hljs-tag">&lt;/<span class="hljs-name">el-main</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-container</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> studentAdd <span class="hljs-keyword">from</span> <span class="hljs-string">'./student/student-add'</span> <span class="hljs-keyword">import</span> studentList <span class="hljs-keyword">from</span> <span class="hljs-string">'./student/student-list'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'frame'</span>, <span class="hljs-attr">components</span>: { studentAdd, studentList } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <h1 id="articleHeader10">2.配置路由</h1> <p>1.打开<code>router</code>文件夹下的<code>index.js</code></p> <p>2.引入并配合新创建的3个.vue组件的路由</p> <p>3.完整代码:</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="import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Frame from '@/components/frame' import StudentList from '@/components/student/student-list' import StudentAdd from '@/components/student/student-add' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Frame, children: [ { path: '/student/list', component: StudentList }, { path: '/student/add', component: StudentAdd } ] } ] }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><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-regexp">//</span> <span class="hljs-keyword">import</span> HelloWorld <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/HelloWorld'</span> <span class="hljs-keyword">import</span> Frame <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/frame'</span> <span class="hljs-keyword">import</span> StudentList <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/student/student-list'</span> <span class="hljs-keyword">import</span> StudentAdd <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/student/student-add'</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ routes: [ { path: <span class="hljs-string">'/'</span>, component: Frame, children: [ { path: <span class="hljs-string">'/student/list'</span>, component: StudentList }, { path: <span class="hljs-string">'/student/add'</span>, component: StudentAdd } ] } ] }) </code></pre> <p><code>tip:这里稍微涉及到一点嵌套路由</code></p> <p><code>tip:src目录下有一个App.vue,进去把这个图片先注释掉(因为他很碍事的说)如下:</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></p> <div id=&quot;app&quot;> <!--<img src=&quot;./assets/logo.png&quot;>--><br /> <router-view></router-view> </div> <p></template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-comment">&lt;!--&lt;img src="./assets/logo.png"&gt;--&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">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></code></pre> <h1 id="articleHeader11">3.运行</h1> <p>在项目目录下运行<code>cmd</code>,执行:<code>npm run dev</code></p> <p><code>tip:一定要在项目目录下运行哦</code></p> <p>之后没有错误的话就可以正确的跑起来啦</p> <p>截图:<br /><code>http://localhost:1801/index#/student/list</code></p> <p><span class="img-wrap"><img data-src="/img/bVbavil?w=1167&amp;h=585" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><code>http://localhost:1801/index#/student/add</code><br /><span class="img-wrap"><img data-src="/img/bVbavit?w=1171&amp;h=587" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h1 id="articleHeader12">小节</h1> <p>最近学的有些吃力啊,感觉有些难理解,原理就先不说了,我怕误人子弟,要是有人看到这里啦的话,你要意会啊意会!加油!</p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_16952.html