写点什么

vue-router 学习 -1

作者:Studying_swz
  • 2022-10-24
    天津
  • 本文字数:2194 字

    阅读完需:约 7 分钟

vue-router学习-1

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
用户头像

Studying_swz

关注

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

还未添加个人简介

评论

发布
暂无评论
vue-router学习-1_前端_Studying_swz_InfoQ写作社区