vue-router 学习 -1

作者：Studying_swz

2022-10-24
天津
本文字数：2194 字
阅读完需：约 7 分钟

1.什么是路由？

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

发展历程：

1.后端路由：
一个页面有自己对应的网址, 也就是 URL.
URL 会发送到服务器, 服务器会通过正则对该 URL 进行匹配, 并且最后交给一个 Controller 进行处理.
Controller 进行各种处理, 最终生成 HTML 或者数据, 返回给前端. 这就完成了一个 IO 操作
2.前后端分离:
随着 Ajax 的出现, 有了前后端分离的开发模式.
后端只提供 API 来返回数据, 前端通过 Ajax 获取数据, 并且可以通过 JavaScript 将数据渲染到页面中.
这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
3.SPA（单页面富应用）
其实 SPA 最主要的特点就是在前后端分离的基础上加了一层前端路由

2.前端路由的规则

URL 的 hash
Html 的 history 模式
方法：history.pushState、history.replaceState、history.go

3.vue-router 基础

vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/
vue-router 是基于路由和组件的路由用于设定访问路径, 将路径和组件映射起来.
在 vue-router 的单页面应用中, 页面的路径的改变就是组件的切换.
安装和使用：
npm install vue-router --save
配置路由相关的信息

        import VueRouter from 'vue-router'        import Vue from 'vue'

复制代码

- 2.通过Vue.use(插件),安装插件（index.js）

复制代码

        Vue.use(VueRouter)

复制代码

- 3.创建VueRouter对象（index.js）

复制代码

        const routes = [            {            }        ]

复制代码

 - 4.配置路由和组件之间的应用关系（index.js）

复制代码

        const router = new VueRouter({            routes,            mode:'history'        })

复制代码

 - 5.router对象传入到Vue实例（index.js）

复制代码

        export default router

复制代码

 - 6.挂载到Vue实例（main.js）

复制代码

        import router from './router'

复制代码

4.vue-router 入门案列

1.创建路由组件
About.vue

    <template>      <div>          <h2>我是关于</h2>          <p>我是关于内容，啊哈哈</p>        <router-view/>      </div>    </template>
    <script>    export default {      name: 'About'    }    </script>
    <style>
    </style>

复制代码

Home.vue

    <template>      <div >          <h2>我是首页</h2>          <p>我是首页内容，啊哈哈</p>
          <router-link to="/home/news" tag="button" replace >新闻</router-link>          <router-link to="/home/message" tag="button" replace >消息</router-link>          <router-view></router-view>      </div>    </template>
    <script>    export default {      name: 'Home',      created(){        console.log("home created");      },      destroyed(){        console.log("home destroyed");      },      activated () {
      },      deactivated () {
      }    }    </script>
    <style>
    </style>

复制代码

2.配置组件和路径的映射关系

    //配置路由相关的信息    import VueRouter from 'vue-router'    import Vue from 'vue'
    import Home from '../components/Home.vue'    import About from '../components/About.vue'    import User from '../components/User.vue'
    //1.通过Vue.use(插件),安装插件    Vue.use(VueRouter)
    //2.创建VueRouter对象    const routes = [        {            path:'',            component: Home        },        {            path:'/about',            component: About,        },    ]    const router = new VueRouter({        //配置路由和组件之间的应用关系        routes,        mode:'history'    })

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

复制代码

3.使用路由

    <template>      <div id="app">        <h2>我是网站的标题</h2>        <!-- 方法一 -->        <router-link to="/home" tag="button" replace >首页</router-link>        <router-link to="/about" tag="button" replace>关于</router-link>        <h2>我是App中一些底部版本信息</h2>      </div>    </template>
    <script>    export default {      name: 'App',
    }    </script>
    <style>    </style>

复制代码

5.vue-router 细节处理

路由默认路径

//2.创建路由对象const routes = [  {    path:'',    redirect: '/home'  },  {    path:'/home',    component: Home  },  {    path:'/about',    component: About,   } ]

复制代码

history 模式

    const router = new VueRouter({        routes,        mode:'history'    })

复制代码

路由代码跳转

6.vue-router 的懒加载

路由懒加载做了什么? 路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块. 只有在这个路由被访问到的时候, 才加载对应的组件

// import Home from '../components/Home.vue'// import About from '../components/About.vue'// import User from '../components/User.vue'
// 懒加载const Home = () => import('../components/Home.vue')const About = () => import('../components/About.vue')const User = () => import('../components/User.vue')

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/59ec4fa42139fe81ea695b96c】。文章转载请联系作者。

Studying_swz

关注

还未添加个人签名 2020-12-23 加入

还未添加个人简介

发布

暂无评论

创作场景

vue-router 学习 -1

1.什么是路由？

2.前端路由的规则

3.vue-router 基础

4.vue-router 入门案列

5.vue-router 细节处理

6.vue-router 的懒加载

Studying_swz

评论