webpack入坑之旅(六)配合vue-router实现SPA
来源:互联网 发布:linux关闭防火墙 编辑:程序博客网 时间:2024/05/29 17:59
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:
- webpack入坑之旅(一)不是开始的开始
- webpack入坑之旅(二)loader入门
- webpack入坑之旅(三)webpack.config入门
- webpack入坑之旅(四)扬帆起航
- webpack入坑之旅(五)加载vue单文件组件
- webpack入坑之旅(六)配合vue-router实现SPA
在上面的练习当中我们已经成功的加载了一个.vue
格式的单文件组件,并且实现了在使用vue情况下的自动刷新。
但是我们最终的目的还是要实现单页面应用程序,这个时候我们就必不可少的需要使用到路由管理器来进行SPA的开发,vue官方为我们提供了一个官方库vue-router,并且配有对应的中文文档。关于里面的内容大家自行前去观看。在这里,只会把我们需要的东西拿出来讲。
vue组件
官网对于组件讲解
在Vue
中定义一个组件非常简单,只需要一对自定义标签,在其中填入内容就可以进行我们的组件编写了,然后使用Vue.component()
去注册我们的组件下面来看一个例子,来直观的看看vue的组件。
组件入门
123456789101112131415161718192021
<script src="js/vue.js"></script><body><div id="app"><my-component></my-component><!-- 自定义标签作为组件名称 --><my-component></my-component><!-- 复用 --></div><script>// 定义并且注册组件// 在官方的示例中使用 Vue.extend({})先注册了一个定义模板,再引用,看个人喜好吧Vue.component("my-component", {template:"<h2>hello Vue component</h2>"})// 创建根实例// 在这里 定义并且注册组件 必须创建根实例前,不然会报错,因为解析顺序的问题?new Vue({el:"#app"});</script></body>
上面就是最简单的定义组件的方式,template
属性中写的东西:就是<my-component>
这个自定义标签渲染后展现出来的样式,这里渲染为:
1234
<div id="app"><h2>hello Vue component</h2><h2>hello Vue component</h2></div>
使用template标签
在上面这段代码中组件内的内容都被写在template
属性中,如果组件中的内容继续增加,一堆的引号和加号来拼接这些字符串简直就是噩梦。所以Vue 引入了template
标签(HTML5定义的,浏览器默认不去解析里面的内容)。<template> 不能用在 <table> 内
下面来看看它的使用方法:
123456789101112131415161718192021
<script src="js/vue.js"></script><body><!-- 使用 template 并且添加选择器(只能使用id)--><template id="myTemp"><h2>This is Template </h2><p>add ...</p></template><div id="app"><my-component></my-component><my-component></my-component></div><script>Vue.component("my-component", {template:"#myTemp"//对应上面定义的template标签中的选择器})new Vue({el:"#app"});</script></body>
可以看到在注册组件中,可以template
可以使用选择器来获取到上面我们<template>
标签中的内容。所以这里应该会被渲染为:
123456
<div id="app"><h2>This is Template </h2><p>add ...</p><h2>This is Template </h2><p>add ...</p></div>
组件的基础介绍就到这,更多详细内容请移步官网
vue-router
刚刚已经对于vue的组件有了一定的了解。现在来结合vue-router,来进行一下动态的切换。
首先是安装,如果使用npm的形式的话,直接运行npm install vue-router --save
,就可以看到vue-router
,已经被添加到了项目依赖中。直接上ES6
的语法来进行引入
123
import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);
起步
其实这一部分vue-router
的中文文档中已经讲的非常详细了。。在这里与它不同的是它用的CommonJS
的规范来进行模块安装,而我使用ES6的import,有兴趣自己去看- -。其他的内容我就直接扒下来了。
html:
12345678910
<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>
JavaScript:
12345678910111213141516171819202122232425262728
// 定义组件var Foo = Vue.extend({template: '<p>This is foo!</p>'})var Bar = Vue.extend({template: '<p>This is bar!</p>'})// 路由器需要一个根组件。// 出于演示的目的,这里使用一个空的组件,直接使用 HTML 作为应用的模板var App = Vue.extend({})// 创建一个路由器实例// 创建实例时可以传入配置参数进行定制,为保持简单,这里使用默认配置var router = new VueRouter()// 定义路由规则// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend// 创建的组件构造函数,也可以是一个组件选项对象。// 稍后我们会讲解嵌套路由router.map({'/foo': {component: Foo},'/bar': {component: Bar}})// 现在我们可以启动应用了!// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。router.start(App, '#app')
我个人感觉这部分还是很好理解的,官方也给了一个在线示例应用。很好的展现了它的路由切换。
简单的介绍到这,下面最重要的部分到了,看看如何结合我们定义的.vue
单文件组件。
首先来看我们的文件目录结构:
定义路由规则
最主要是main.js
的变化,直接在文件中讲解了:
12345678910111213141516171819202122232425262728293031323334
// 引入vue以及vue-routerimport Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);// 引入组件!直接使用es6的语法import index from './components/app.vue';import list from './components/list.vue';import hello from './components/hello.vue';//开启debug模式Vue.config.debug = true;// new Vue(app);//这是上一篇用到的,新建一个vue实例,现在使用vue-router就不需要了。// 路由器需要一个根组件。var App = Vue.extend({});// 创建一个路由器实例var router = new VueRouter();// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend创建的组件构造函数,也可以是一个组件选项对象。// 稍后我们会讲解嵌套路由router.map({//定义路由映射'/index':{//访问地址name:'index',//定义路由的名字。方便使用。component:index,//引用的组件名称,对应上面使用`import`导入的组件//component:require("components/app.vue")//还可以直接使用这样的方式也是没问题的。不过会没有import集中引入那么直观},'/list': {name:'list',component: list},});router.redirect({//定义全局的重定向规则。全局的重定向会在匹配当前路径之前执行。'*':"/index"//重定向任意未匹配路径到/index});// 现在我们可以启动应用了!// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。router.start(App, '#app');
在index.html需要有用于渲染匹配的组件,如下
123
<div id="app"><router-view></router-view></div>
现在当我们运行 npm start
进入http://localhost:8080/
就会自动跳转到http://localhost:8080/#!/index
,并且读取里面的内容。
实现路由跳转
主要抽出app.vue
中的内容来讲解,的内容是:(list.vue
里面的内容自行设置查看吧)
1234567891011121314151617181920212223242526
<template><div><h1>姓名:{{name}}</h1><h2>{{age}}</h2><button @click="golist">$route.router.go查看<span class="tag" style="color:rgb(204,102,102)"></<span class="name">button</span>></span></div><div class="line" style="height:20px"> <span class="tag" style="color:rgb(204,102,102)"><<span class="name">a</span> <span class="attr">v-link</span>=<span class="string" style="color:rgb(181,189,104)">"{ name: 'list' }"</span>></span>v-link查看列表<span class="tag" style="color:rgb(204,102,102)"></<span class="name">a</span>></span></div><div class="line" style="height:20px"> <span class="tag" style="color:rgb(204,102,102)"><<span class="name">a</span> <span class="attr">v-link</span>=<span class="string" style="color:rgb(181,189,104)">"{ name: 'index' }"</span>></span>回去主页<span class="tag" style="color:rgb(204,102,102)"></<span class="name">a</span>></span></div><div class="line" style="height:20px"><span class="tag" style="color:rgb(204,102,102)"></<span class="name">div</span>></span></div><div class="line" style="height:20px"><span class="tag" style="color:rgb(204,102,102)"></<span class="name">template</span>></span></div><div class="line" style="height:20px"><span class="tag" style="color:rgb(204,102,102)"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line" style="height:20px"> <span class="keyword" style="color:rgb(178,148,187)">export</span> <span class="keyword" style="color:rgb(178,148,187)">default</span> {<span class="comment" style="color:rgb(150,152,150)">//这里是官方的写法,默认导出,ES6</span></div><div class="line" style="height:20px"> data () { <span class="comment" style="color:rgb(150,152,150)">//ES6,等同于data:function(){}</span></div><div class="line" style="height:20px"> <span class="keyword" style="color:rgb(178,148,187)">return</span> { <span class="comment" style="color:rgb(150,152,150)">//必须使用这样的形式,才能创建出单一的作用域</span></div><div class="line" style="height:20px"> name:<span class="string" style="color:rgb(181,189,104)">"guowenfh"</span>,</div><div class="line" style="height:20px"> <span class="attr">age</span>:<span class="string" style="color:rgb(181,189,104)">"21"</span></div><div class="line" style="height:20px"> }</div><div class="line" style="height:20px"> },</div><div class="line" style="height:20px"> <span class="attr">methods</span> :{</div><div class="line" style="height:20px"> golist () {<span class="comment" style="color:rgb(150,152,150)">//方法,定义路由跳转,注意这里必须使用this,不然报错</span></div><div class="line" style="height:20px"> <span class="keyword" style="color:rgb(178,148,187)">this</span>.$route.router.go({name:"list"});}}}</script><style></style><!-- 样式自行设置,或者直接看源码就好 -->
因为自刷新的缘故,直接切换到浏览器。
点击上面使用的v-link
,与router.Go
的方式都可以跳转到list
定义的路由。(观察浏览器地址栏的变化)在这里我们使用的{name:"list"}
,使用{ path: '/list' }
会有同样的效果。
引用Vue组件
在第一小点里面我们看到了在页面内的组件的使用方法,第二小点中学习到了vue-router
的制定路由规则。
看过这两个地方之后,我们把思维发散开来,应该就能触类旁通的想到如何在页面中嵌套加载别的组件了。
我们创建一个hello.vue
,里面内容随意。现在我们如果要在app.vue
中加载它,那么只需要在app.vue
中使用import hello from "./hello.vue"
(其实这个达到了使用require两步的效果。引入赋值)。
引入之后,只需要如下注册:
123456
export default {//其它的就components:{hello//若还有更多的组件,只需要在import的情况下,以逗号分割,继续注册就好}}
最后在app.vue
中添加<hello></hello>
这一对自定义标签,就可以实现加载hello.vue
中的内容。
组件的嵌套也就是这样,很简单的描述完了,但是怎么样去抽离组件,在工作中积累可以复用的组件才是我们真正需要去思考的。
那么先到这,关于组件之间通信的问题,留到以后慢慢了解。
路由嵌套
还是刚刚的代码与目录结构,我们已经实现了组件之间的嵌套,但是有时并不希望组件直接就加载进来,而是在用户点击后才展现在页面中,这是就需要使用到路由嵌套。
为了偷懒,这里就直接使用hello.vue
。实现嵌套路由主要有以下几步:
第一步:制定嵌套路由规则:
看main.js
下面这部分的代码:
123456789101112131415
router.map({'/index':{name:'index',component:index,// 在/index下设置一个子路由subRoutes:{// 当匹配到/index/hello时,会在index的<router-view>内渲染'/hello':{name:'hello',//可有可无,主要是为了方便使用// 一个hello组件component:hello}}},});
第二步:在组件中添加<router-view>
来自官网的解释:
<router-view>
用于渲染匹配的组件,它基于Vue的动态组件系统,所以它继承了一个正常动态组件的很多特性。
将<router-view>
写在app.vue
的<template></template>
标签中。
第三步:写入跳转路径
还是在app.vue
中:
123
<a v-link="{ name: 'index' }">回去主页</a><!-- 点击这两个标签就会实现页面内的切换效果 --><a v-link="{ name: 'hello' }">嵌套的路由</a>
,切换到浏览器,点击该嵌套的路由
即可让hello.vue
中的展现出来,在这里直接使用了v-link
来实现跳转(知道为什么要写name了吧。。如果使用path会是这样的{ path: '/index/hello' }
- -。 ) ,当然router.go
同理。(注意在点击两个不同的文字时,地址栏的变化,以及展现内容的切换)
注意:
在我的源码中是在<style scoped></style>
标签中定义样式的,请注意scoped
的使用,它表示在该style
中定义的样式只会在当前的组件中起到效果,而不会去影响全局的css样式。
最简单的理解应该就是:
未写该scoped
属性的所有组件中的样式,在经过vue-loader
编译之后拥有全局作用域。相当于共用一份css
样式表。
而写了该属性的的组件中定义的样式,拥有独立作用域。相当于除去引入了公用的一份css
样式表外,但单独拥有一份css
的样式表。
好了,先到这。讲的有些凌乱,下次见
- webpack入坑之旅(六)配合vue-router实现SPA
- webpack入坑之旅(六)配合vue-router实现SPA
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
- 手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用(SPA)
- webpack+vue 入坑之始
- webpack入坑之旅(五)加载vue单文件组件
- webpack入坑之旅(五)加载vue单文件组件
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
- vue-router配合ElementUI实现导航
- webpack入坑之旅(三)webpack.config入门
- webpack入坑之旅(三)webpack.config入门
- webpack入坑之旅
- webpack入坑之旅
- Vue-cli+router+webpack
- vue成长之路+实战+Vue2+VueRouter2+webpack(一)vue-router路由入门
- vue成长之路+实战+Vue2+VueRouter2+webpack(一)vue-router路由入门
- JVM(3):Java GC算法 垃圾收集器
- webpack入坑之旅(四)扬帆起航
- 【分治算法】例子
- webpack入坑之旅(二)loader入门
- JAVA的String 类全知道
- webpack入坑之旅(六)配合vue-router实现SPA
- 2017-6-6-反思一波
- 城市文化笔记整理(二)
- webpack入坑之旅(五)加载vue单文件组件
- 第七十九天 : httpd 基础入门
- webpack-- 模块热替换
- JVM(4):Jvm调优-命令篇
- 排序之希尔排序
- android listview错乱问题