【Vue学习记录 3 】Webpack、Vue2框架介绍、router路由

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了【Vue学习记录 3 】Webpack、Vue2框架介绍、router路由，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3777字，纯文字阅读大概需要6分钟。

内容图文

1 Webpack

1.1 什么是webpack

1.2 前端模块化

1.3 与其他打包工具frunt/gulp对比

webpack的正常运行，必须依赖node环境，而npm是管理node依赖包

2 main.js => render：

new Vue({
  el:'#app',
  render :function(createElement) {
    //1.普通用法 createElement('标签’，{标签的属性]，[’'〕)
    return createElement('h2',{class:'box'},['Hello world', 
              createElement('button',['按钮'])])
    //2.调用组件的用法
    return createElement(cpn)
  }     
})

//3.直接调用外部App.vue
new Vue({
  el: '#app',            
  render: c => c(App),   
  router                  
})

//----------------------------cpn
const cpn = {
  template: `<div>{{message}}</div>`,
  data(){return{message:'我是组件'}}
}

runtime-compiler
template > ast > render > vdom > UI

runtime-only（性能更高、代码更少）
render > vdom > UI

3 关于router路由

3.1 什么是路由-页面渲染

路由routing：就是通过互联的网络把信息从北源地址传输到目的地址的活动.

路由中有一个非常重要的概念：路由表。
路由表本质上就是一个映射表,决定了数据包的指向.

3.1.1 后端路由阶段

早期开发通过：后端渲染+后端路由
后端渲染：在服务器中通过jsp/php技术渲染好页面，在发送到浏览器上

3.1.2 前端路由阶段

前后端分离阶段

服务器存储API接口，静态资源服务器存储 多份html+css+js
两者在浏览器需要时发送给它进行渲染
此时暂无前端路由的概念

SPA页面/单页面富应用阶段

与前后端分离不同的是，在静态资源服务器中 只存储一份html+css+js，浏览器请求时全部发送
前端路由：因为只有一份html，前端路由管理的就是url改变后重新渲染页面（而不刷新页面）

3.2 SPA的页面跳转

页内跳转，不请求服务器的html+css+js

URL的hash

补充说明:上面只演示了三个方法
因为history.back()等价于history.go(-1)
history.forward()则等价于history.go(1)
这三个接口等同于浏览器界面的前进后退。

4 路由的基本使用

4.1 router.js详解

步骤二，在Vue中使用插件，实现路由

*******router*****************
//配置路由相关的信息
import VueRouter from 'vue-router '
import Vue from 'vue '

// 1.通过Vue.use(插件)，安装插件
vue.use(vueRouter)

// 2.创建VueRouter对象
const routes =[

]
const router =new VueRouter({
//配置路由和组件之间的应用关系routes
routes
})

// 3.将router对象传入到vue实例
export default router



*******mian.js**************
import vue from 'vue '
import App from './App'
import router from './router'  //vue中的import目录会自动定位里面的index.js

vue.config.productionTip = false
new Vue({
el: '#app',
router: router,
render: h =>h(App)
}

4.2 路由的具体实现

//1.创建路由组件///
//components/Home.vue/
<template>
  <div><h1>我是home</h1></div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
<style></style>

//components/About.vue/
<template>
  <div><h1>我是关于</h1></div>
</template>

<script>
export default {
  name: 'About'
}
</script>
<style></style>


//2.设置映射关系
//router/index.js/
import VueRouter from 'vue-router '
import Vue from 'vue '

//导入组件
import Home from '../component/Home'
import About from '../component/About'

vue.use(vueRouter)
const routes =[
  {
    //此处是path，不是url的原因，url是http……的格式
    path: '/home',  
    template:null
  },
  {
    path: '/about',
    template:null
  }
]
const router =new VueRouter({

})
export default router

//3.使用路由//
//App.js/
<template>
  <div id="app">  
    <!-- router-link：全局组件   router-link：渲染routerlink的内容，方法是替换routerview -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style></style>

````````路由默认路径

````````url，修改hash路径为html

//router.js//
const router = new VueRouter({
	routes,
	mode:'history' //将url内的hash表示转换成html网站
})

4.3 router-link 补充

<router-link to=" /home" tag="button" replace active-class="active">首页</router-link>

tag:修改默认a标签
replace：设定网页不能回退
active-class：设定默认的class名称(可以用默认存在的class设定css)，也可以在router.js中改

4.4 用代码实现router路由跳转

$router.push() 和 $router.replace()

4.5 动态路由 ----待看

https://www.bilibili.com/video/BV15741177Eh?p=108

内容总结

以上是互联网集市为您收集整理的【Vue学习记录 3 】Webpack、Vue2框架介绍、router路由全部内容，希望文章能够帮你解决【Vue学习记录 3 】Webpack、Vue2框架介绍、router路由所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---