zoukankan      html  css  js  c++  java
  • vue基础---13vue-router

    00.什么是路由?

      路由是一个网络工程里面的术语。

      路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科

     01.后端渲染和后端路由

      1.后端渲染:以前网页开发都是通过JSP/PHP等进行开发的。JSP即java serve page,用Java写出一个网页,然后把它传到浏览器,让浏览器直接展示这个网页。

      2.后端渲染流程:

        a、现在有一个浏览器想请求网页,浏览器可能从这个网站中请求很多个网页。

        b、浏览器将请求的页面的URL发到服务器里面,服务器解析请求的网页。

        c、服务器在后台通过JSP直接将网页写好,网页中包含HTML+CSS+JAVA。Java代码的作用是从数据库中读取数据,并且将它动态的放在页面中。

        d、在服务器中通过Java已经完全将所有的东西渲染好了,服务器端的东西已经是最终的网页了,然后直接将最终的网页传给浏览器,传给浏览器的只有HTML和css代码。

        e、这就叫做后端渲染,也叫服务端渲染。传到浏览器的就是已经渲染好的页面。

      3.后端路由:浏览器可能从网站中请求很多个页面,每一个请求的URL和页面之间形成一种映射关系;后端处理URL和页面之间映射关系的路由称作后端路

       由,可以理解为路由表。

      4.例图:

      

    02.前后端分离阶段

      1.前后端分离简介:

       随着Ajax的出现,有了前后端分离的开发模式,后端只提供API来返回数据,前端通过Ajax获取数据,并且通过JavaScript将数据渲染到页面上。前后端分离的最

       大优点是:前后端责任清晰,后端专注与数据,前端专注于交互和可视化。

      2.例图:

       

    03.前端路由与单页面富应用阶段

      1.单页面富应用简介:简称SPA,SPA最主要的特点就是在前后端分离的基础上加了一层前端路由。

      2.流程详解:一般情况下,整个网站只有一个html页面,在前后端分离阶段,静态资源服务器中放了好几套html+css+js,对应各个页面,但是在SPA里面,只

       有一个html+css+js。当你输入网站,它将全部资源都加载到浏览器中。比如你想进入你页面的首页,通过首页的url从浏览器获取的全部资源中抽取出需要的组件

      3.前端路由:url和组件之间的一种映射关系前端路由的核心:改变URL,但页面不进行整体的刷新

      4.例图:

      

     04.安装vue-router

      1.执行:npm install vue-router --save

      2.创建步骤

        第一步:导入路由对象,并且调用 Vue.use(VueRouter)

        第二步:创建路由实例,并且传入路由映射配置

        第三步:在Vue实例中挂载创建的路由实例

      3.详细步骤:

        a、创建router>index.js文件,导入路由对象,并调用Vue.use(VueRouter)

    import Vue from 'vue'
    import VueRouter from 'vue-router'//导入vue-router

        b、创建组件和路由实例,在router>index.js中配置路由映射

    const Home =()=>import ('../components/home.vue')//导入组件
    const About =()=>import ('../components/about.vue')
    const User =()=>import ('../components/user.vue')



    // 1.注册router插件 Vue.use(VueRouter) // 2.定义路由 const routes=[ { path:'/home', component:Home } ] // 3.创建实例 const router =new VueRouter({ routes, mode:'history' }) // 4.导出router实例 export default router

        c、在main.js中挂载创建的路由实例

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

        d、在APP.vue中使用路由

    <router-link to="/home" tag="button">首页</router-link>
    <router-view></router-view>

        e、效果:

       

  • 相关阅读:
    Educational Codeforces Round 10 C. Foe Pairs 水题
    Educational Codeforces Round 10 B. z-sort 构造
    CDOJ 1048 Bob's vector 三分
    Educational Codeforces Round 10 A. Gabriel and Caterpillar 模拟
    第14届电子科大初赛民间盗版部分题目题解
    HDU 5654 xiaoxin and his watermelon candy 离线树状数组 区间不同数的个数
    HDU 5653 Bomber Man wants to bomb an Array. dp
    HDU 5652 India and China Origins 二分+并查集
    HDU 5651 xiaoxin juju needs help 数学
    HDU 5650 so easy 数学
  • 原文地址:https://www.cnblogs.com/hunter1/p/15261625.html
Copyright © 2011-2022 走看看