vue-router的学习

谋莽台
180 阅读2分钟

Vue-Router

认识路由

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

两种机制（路由和转送）

  • 路由时决定数据包从来源到目的地的路径
  • 转送将输入端的数据转移到合适的输出端

路由表

路由表本质上就是一个映射表，决定了数据包的指向

发展

后端路由阶段

后端渲染

当访问一个网站或是跳转到其他页面，url都会被传送给服务器，服务器根据你所访问的url在后台自动生成渲染好的页面，这个页面包含html+css+java代码，java代码的作用是从数据库中读取数据，并且将它动态的放在页面中，最后传回给网站显示，所以页面只包含html+css

后端路由（有利于SEO优化）

后端处理url和页面之间的映射关系，服务器会通过正则对url进行匹配，最后交给一个Controller进行处理

前后端分离阶段

  • ajax的出现，有了前后端分离的开发模式
  • 后端只提供api来返回数据，前端通过ajax获取数据，再通过js渲染到页面。（后端只负责提供数据，不负责任何阶段的内容）
  • 当有移动端出现后，后端不需要进行任何处理，一套api就可
  1. 用户访问一个页面，先从静态资源服务器中获取html+css+js，js代码由浏览器执行
  2. 然后执行的js代码（如$.ajax)会再向提供API接口的服务器发送请求，获取需要的数据，
  3. 再通过其他的js代码创建标签，最终再将js相关的东西渲染到页面
前端渲染

浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的。

前端路由阶段

单页面富应用阶段SPA
  • 在前后端分离的基础上加上一层前端路由
  • 由前端来维护一套路由

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

前端路由

配置映射关系，在一个页面内当点击一个按钮时，会生成一个url（不会向服务器请求资源），根据js代码从获取到的全部资源里抽取需要的资源生成页面（在vue中就是一个一个的组件）。

  • 由前端管理url和页面的映射关系（一个url对应一个组件），利用vue-router自动映射
与前后端分离的区别
  • 在前后端分离中，静态资源服务器中的每一个url对应一个html+css+js，

所以里面有很多套html+css+js

  • 在单页面富应用里，静态资源服务器中只有一个html+css+js
  1. 单页面富应用中，请求一个url会从静态资源服务器中请求到html+css+js(全部资源),虽然资源全部获取，但并不是立马全部执行渲染
  2. 然后根据执行的js或者url的变化（并不会向服务器请求数据，即改变url，但是页面不进行整体的刷新），而是从已经获取到的html+css+js数据里抽离一部分所需的数据（在编译时所有的.vue文件已经全部打包到一个bundle.js文件里，所以在执行js或改变url时会根据bundle.js生成对应不同的页面即组件）
  3. 最后将页面渲染

如何做到不刷新

url的hash

loaction.hash = 'foo'

html5的history ：pushState和back

history.pushState({},'','home')
// http://localhost:8080/home
history.pushState({},'','me')
// http://localhost:8080/me
history.back()
// http://localhost:8080/home#/

html5的history ：replaceState

history.replaceState({},'','home')
//无法返回

html5的history：go（-1）

安装和使用

npm install vue-router --save

  1. 导入路由对象，并且调用Vue.use

    // 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// 1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)

  2. 创建路由实例，传入路由映射配置

    const routes = []
// 2.创建路由对象
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes
})

  3. 在实例中挂载创建的路由实例

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


//main.js
import router from './router'
new Vue({
  el: '#app',
	router,
  render: h => h(App)
})

  4. 创建路由组件

    import Home from '../components/Home'
import About from '../components/About'

  5. 配置路由映射

    const routes = [
	{
		path:'/home',
		component: Home
	},
	{
		path:'/about',
		component: About
	}
]

  6. 使用路由：通过和

    其实是一个组件，最终会被渲染成a标签

    <template>
  <div id="app">
		<router-link to="/home">首页</router-link>
		<router-link to="/about">关于</router-link>
		<router-view></router-view>
  </div>
</template>

    相当于一个占位符，之后路径一旦改变，就会用组件替代掉该位置。

动态传递数据

  1. 路由映射中的路径设置为动态路径

    path:'/user/:userId'

  2. 通过v-bind动态绑定数据

    <router-link :to="'/user/'+userId">用户</router-link>

    data(){
    return {
        userId : 'lisi'
    }
},

  3. 通过route获取当前活跃路由下的userId

    computed:{
    userId(){
        return this.$route.params.userId;
    }
}

嵌套路由（二级路由）

  1. 创建对应的子组件，并且在路由映射中配置对应的子路由
  2. 在组件内部使用标签

懒加载

  • 当打包构建应用时，javascript包会变得非常大，影响页面加载
  • 通过把不同的路由对应的组件分割成不同的代码，当路由被访问时才加载，就更加高效了

app.js表示当前应用程序开发的所有业务代码

vender（第三方）.js 引用的第三方代码和框架所存的地方

manifest.js 为我们的打包的代码作底层支撑

使用

在es6中

component: () => import('../components/User.vue')

传递参数

  1. params的类型

    • 配置路由格式：/router/:id

    • 传递的方式：在path后面跟上对应的值

    • 传递后形成的路径：/router/123

  2. query的类型

    • 配置路由格式: /router
    • 传递方式：对象中使用query的key作为传递方式
    • 传递后形成的路径： /router?id=123

导航守卫

作用：用于监听来回跳转过程

//前置钩子 在路由跳转之前进行的回调
router.beforeEach((to,from,next) => {
	//从from跳转到to
	console.log(to)
	document.title = to.matched[0].meta.title; 
	next()
})
avatar
文章
阅读
粉丝