最近被Boos调去给新人做培训去了,目前把自己整理的一些东西分享出来,希望对大家有所帮助

本章节为VueRouter前端 路由的章节部分

大纲

一、基本概念

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

需要一些映射表

  1. 做路由
  2. 做信息的转发(核心就是:转发)

后端路由还有前端路由,后端渲染和前端渲染

前端渲染(前后端分离API生态),后端渲染(view嵌套一起)

前端路由的核心概念

地址变化的时候改变url的时候,不进行整体页面刷新

改变url但是不刷新页面,的解决方式

我们有这样的一个需求,改变url跳转地址,我们获取新的页面,但是不希望页面发生刷新

解决方案1:locaion.hash = '/'

这个是vueRouter的底层实现

监听hash的变化,从而改变网页数据的获取机制,渲染对应的组件,

解决方案2:H5的histroray模式

  1. pushState

    history.pushState({},'','home'),第三个参数就是url

这里的push实际上就是一个栈结构(先进后出),

假设我们这里需要回去,使用back()弹栈

history.pushState({},'','home'),
history.pushState({},'','about'),
history.pushState({},'','user'), //执行这个之后就能进行back()出栈了
history.back(),
// 此时的url是 /about
  1. repalceState

这里有一个方法和push方法很像,但是不会back()不能点击后腿按钮

history.repalceState({},'','user'),
  1. go

这里的go是对栈的一个操作,

go(-1)弹出一个

go(-2)弹出二个

go(1)压入一个

go(2)压入二个

go(-1)

以上就是我们的基本的前端路由原理

二、v-router基本使用

前端三大框架都有自己的router,可以用来构建SPA应用

使用小提示,还是非常非常的简单的:

  1. 如果你没有安装就需要 npm install vue-router去安装
    • 导入路由对象,并且调用Vue.use(VueRouter)安装这个路由插件
    • 创建路由实例,传入映射配置wxain
    • 在vue实例中挂载创建好了的路由

1.导入路由对象,并且配置optionn给路由

/router/index.js


/**
* 配置路由相关的信息
*/
// 1. 导入
import Router from 'vue-router' // 2.1 导入vue实例
import Vue from 'vue' // 导入组件
import Home from '../components/Home.vue'
import About from '../components/About.vue' // 2.2使用路由(插件),安装插件,vue的插件,都是这样安装,Vue.use
Vue.use(Router) // 3. 创建路路由对象,这个就是在Router里面配置映射和对象等东西 // 4. 抽离配置项出来
const routes = [] const router = new Router({routes}) //4. 导出
export default router

2.配置路由映射

/router/index.js

const routes = [

 {path:'/home',component:Home},
{path:'/about',component:About}, ]

3.在实例中使用路由

/main.js

import Vue from 'vue'
import App from './App'
import router from './router'//注意啊模块查找规则index.js Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,// 主要是在这里挂载进去就好了
render: h => h(App)
})

4.小心,我们的路由入口还有连接link

/App.vue


<template>
<div id="app">
<!-- //这两个是一个全局祖册过着个组件,这个就是一个a标签 -->
<router-link to='/home'>首页</router-link>
<router-link to='/about'>关于</router-link>
<!-- 路由出口,既:渲染的出口,这个就是一个占位符号 -->
<router-view></router-view>
</div>
</template>

以下是我们的两个组件

/Home.vue

<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容哈哈哈</p>
</div>
</template> <script>
export default { }
</script> <style scoped> </style>

/About.vue

<template>
<div>
<h2>我是关于页面</h2>
<p>我是首关于内容哈哈哈</p>
</div>
</template> <script>
export default { }
</script> <style> </style>

以上就是我们非常简单的使用

三、其它的知识点补充

路由的默认值,并且修改成mode=>hisary模式

我们希望默认显示的就是一个首页

解决方式,映射一个'/’,然后进行重定向

/index.js

  {
path:'/',
redirect:'/home'
},

我们为什么要去做这调整成一个history,因为我们希望去掉#这个标识

只需要在new 的时候指定一下就好了

/index,js

const router = new Router({
routes,
mode:"history"//就是这里的这个更改路由方式
})

router-link的属性

  1. tage

    to是一个属性 ,默认是渲染成一个a链接,假设我现在需要默认渲染成一个buttmm怎么办呢?

    加一个tag就好了
    <router-link to='/home' tag='button'  >首页</router-link>
  1. 更改模式replceStats 不允许浏览器回退

    replace加上去就好了
<router-link to='/about' tag='button' replace >关于</router-link>
  1. 我们可以利用一些默认的东西去非常方便的做到想要的效果
<style>
.router-link-active{
color: blue;
}
</style>

替换值:我们希望不要怎么长,我们希望.active就能改样式怎么搞?

加一个active-calss就好了,这个直接就是acitve做为类就好了

 <router-link to='/home' tag='button'  active-class  >首页</router-link>
<style>
.active{
bgc:red
}
</style>

代码路由跳转,意思就是重定向

注意啊!route != router

在我们学习路由的时候,this.$router是一个非常重要的对象

这个东西在开中经常的使用

// this.$router.push('重定向的值就好了')。
// this.$router.push('/home')
// 如果你不想有出现回退按钮,这样来做就好了
this.$router.replace('/home')

四、动态路由参数

这里只是简单的介绍了理由传参的地址栏拼接模式,但是还有更多更奇奇怪怪的传值方式,详见官方Router文档,

this.$router.parmas
// 这个parmas里面就是我们的路由参数存放点

这里我们有这样的一个需求,我们希望点击user页面的时候可以,得到任意的路由参数

比如我们现在/user/zhnsang,的时候可以获取zhangshang,/user/lishi的时候可以获取lishi>

  1. 首先我们需要在路由里面加:

    /router/index.js
   {
path: "/user/:usermsg",
component: User
}
]
  1. 页面传递数据

    /App.vue
router-link :to="'/user/'+username">用户相关</router-link>
<!-- 路由出口,既:渲染的出口,这个就是一个占位符号 -->
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'App',
data() {
return {
username: 'lisi'
}
},
  1. 页面获取数据

一定要注意了,一定是rouer里面定义的才能从另一路由拿出来

/User.vue


<template>
<div>
<h2>我是用户相关专业</h2>
<p>我是用户讯息相关页面,嘿嘿嘿嘿嘿</p>
<h1>{{ $route.params.usermsg }}44</h1>
<hr>
<h2>{{username}}</h2>
</div>
</template> <script>
export default {
computed: {
username() {
return this.$route.params.usermsg
}
},
}
</script> <style scpoe> </style>

五、细节详解

注意啊!再说一遍route != router

注意啊,这里的$route实际上是我们在main里面new的一个Router得到的,

并且 这个route对象是随着请求的地方不一样,而改变的。也就是说,这个的route是当前页面中的route对象,而且在vue只能只有一个route实例存在

六、 Vue的webpack打包详解 + 路由懒加载

一个vue项目的简单打包目录结构分析

我们来看看,在一个vue项目中,简单的三个文件是怎么打包的

假设目前有这样的三个文件 ,我们需要对他们进行打包,mian是入口,有一个add业务,有一个math依赖模块。那么我们webpack打包成的三个文件到底是如何运行的呢?

在vue中 使用webpack打包的时候,会把一些东西给分模块的打包出来,它打包的东西的目录结构如下

里面我们实际打包的时候会把css,js都给分开,各自有各自的作用

| dist
| ---static
| ---css
| ---js
| -----app.XXXX.js (这个是项目的业务逻辑所在)
| -----manifest.xxxx.js (这个是底层打包的依赖文件所在)
| -----vendor.xxxx.js (这个是依赖所在)
| idnex.html

路由懒加载

  1. 概念的理解

目前呢,我们打包的情况是这样的:我们所有的代码都是集中放在了以一个app.xxx.js文件中,这样其实不利于后期的维护和开发,因为如果我们有很多很多的大量的代码的时候,我们的这个文件就会变得非常非常的大,于是呢,我们就需要路由懒加载,所谓懒加载就是:‘在需要的时候,才去加载某个资源文件’,路由懒加载,就是把每一个路由对应的业务逻辑代码,在打包的时候分割到不同的js文件中,如何在需要用的时候再去请求它

经过这样的打包的懒加载之后,我们的目录会变成这个样子

| dist
| ---static
| ---css
| ---js
| -----0.xxx.js (假设是路由home的业务逻辑代码)
| -----1.xxx.js (假设是路由about的业务逻辑代码)
| -----app.XXXX.js (这个是项目的业务逻辑所在)
| -----manifest.xxxx.js (这个是底层打包的依赖文件所在)
| -----vendor.xxxx.js (这个是依赖所在)
| idnex.html
  1. 如何使用

使用非常的简单,主要有如下的三种方式去使用,但是我最喜欢的还是最后一种方式

/rouetr/index.js

- 使用vue的异步组价和webpack的写法,早期的时候
const Home = resolve =>{ require.ensure(['../compenet/Home.vue'],()=>{
resolve (require('../compenet/Home.vue'))
})} - AMD规范的写法
const About = resolve =>{ require(['../compenent/About.vue'],resolve) } - ES6的结合异步组件的方式(最常用)
const Home = () => import('../compenet/Home.vue')

实际的使用

/router/index.js

/**
* 配置路由相关的信息
*/
// 1. 导入
import Router from 'vue-router' // 2.1 导入vue实例
import Vue from 'vue' // 导入组件
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User'
const Home = () =>
import ('../components/Home.vue')
const About = () =>
import ('../components/About.vue')
const User = () =>
import ('../components/User') // 2.2使用路由(插件),安装插件,vue的插件,都是这样安装,Vue.use
Vue.use(Router) // 3. 创建路路由对象,这个就是在Router里面配置映射和对象等东西 // 4. 抽离配置项出来
const routes = [{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
{
path: "/user/:usermsg",
component: User
}
] const router = new Router({
routes,
mode: "history"
}) //4. 导出
export default router //6. 去main里面挂载

七、 路由嵌套

我们目前有这样的一个需求:我们希望我们在hone下,可以/home/new去到home下的一个子组件,/home/message去到另一个子组件

  1. 首先 我们需要有组件

    /components/HomeMessage.vue
<template>
<div>
<ul>
<li1>我是消息1</li1>
<li2>我是消息2</li2>
<li3>我是消息3</li3>
<li4>我是消息4</li4>
</ul>
</div>
</template> <script>
export default {
name:"HomeMessage"
}
</script> <style> </style>

/components/HomeNews

<template>
<div>
<ul>
<li1>新1</li1>
<li2>新2</li2>
<li3>新3</li3>
<li4>新4</li4>
<li5>新5</li5>
</ul>
</div>
</template> <script>
export default {
name:"HomeNews"
}
</script> <style> </style>
  1. 在路由里面去配置
const HomeNews = () =>
import ('../components/HomeNews')
const HomeMessage = () =>
import ('../components/HomeNews') // 2.2使用路由(插件),安装插件,vue的插件,都是这样安装,Vue.use
Vue.use(Router) // 3. 创建路路由对象,这个就是在Router里面配置映射和对象等东西 // 4. 抽离配置项出来
const routes = [{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
children: [{
path: '',
redirect: 'news'
},
{
path: 'news',// 这里写路由实际上应该是/home/news,这里只是一个相对路由地址,
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}, ]
},
{
  1. 打入口router-view(瞎起的名字实际上就是路由的占位符)

    /Home.vue
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容哈哈哈</p>
<router-link to="/home/news">news</router-link>
<router-link to="/home/message">message</router-link>
<router-view></router-view>
</div>
</template> <script>
export default { }
</script> <style scoped> </style>

这里如果是有关状态的保持,我们需要使用key-alive,后面我们再做详细的讲解

Vue —— 精讲 VueRouter(1)的更多相关文章

  1. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  2. vue.js和vue-router和vuex快速上手知识

    vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...

  3. 小书MybatisPlus第6篇-主键生成策略精讲

    本文为mybatis系列文档的第6篇,前5篇请访问下面的网址. 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总结 小 ...

  4. 小书MybatisPlus第7篇-代码生成器的原理精讲及使用方法

    本文是本系列文章的第七篇,前6篇访问地址如下: 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总结 小书Mybatis ...

  5. 小书MybatisPlus第8篇-逻辑删除实现及API细节精讲

    本文为Mybatis Plus系列文章的第8篇,前7篇访问地址如下: 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总 ...

  6. 精讲RestTemplate第2篇-多种底层HTTP客户端类库的切换

    本文是精讲RestTemplate第2篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 RestTemplate只是对其他的HTTP客 ...

  7. 精讲RestTemplate第3篇-GET请求使用方法详解

    本文是精讲RestTemplate第3篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...

  8. 精讲RestTemplate第4篇-POST请求方法使用详解

    本文是精讲RestTemplate第4篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...

  9. 精讲RestTemplate第4篇-DELETE、PUT等请求方法使用详解

    本文是精讲RestTemplate第5篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...

随机推荐

  1. Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权(四)

    在上一讲中,我们已经完成了一个完整的案例,在这个案例中,我们可以通过Angular单页面应用(SPA)进行登录,然后通过后端的Ocelot API网关整合IdentityServer4完成身份认证.在 ...

  2. Java——变量自增(++)自减(--)

    //运算符在操作数之后,称为“后增量”.i变量自增,返回自增之前的值;//运算符在操作数之前,称为“前增量”.i变量自增,返回自增之后的值.//自减同理 public static void test ...

  3. 循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

    在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般 ...

  4. JS中Class的两种写法

    写法一:使用函数: var ClassName = function() { this.message = 'dat.gui'; this.speed = 0.8; this.displayOutli ...

  5. C# 数据操作系列 - 17 Dapper ——号称可以与ADO.NET 同台飙车的ORM

    0. 前言 之前四篇介绍了一个国内开发者开发的优秀框架SqlSugar,给我们眼前一亮的感觉.这一篇,我们将试试另一个出镜率比较高的ORM框架-Dapper. Dapper是一个轻量级的ORM框架,其 ...

  6. akka-typed(1) - actor生命周期管理

    akka-typed的actor从创建.启用.状态转换.停用.监视等生命周期管理方式和akka-classic还是有一定的不同之处.这篇我们就介绍一下akka-typed的actor生命周期管理. 每 ...

  7. 04.Django-视图与路由

    视图层 1. HTTP请求 HttpRequest对象 request.path #使用GET方法时,只会得到路径. request.get_full_path() #使用GET方法时,会得到包括路径 ...

  8. php实现ajax请求的方法

    php实现ajax请求的方法 Ajax页面:第一,了解底层逻辑,正是平常的1个提交在无刷新的条件下发出请求后完成回应,之后去针对你需要的条件来做动作. <!DOCTYPE html> &l ...

  9. (Java实现) 最佳调度问题

    题目描述 假设有n个任务由k个可并行工作的机器完成.完成任务i需要的时间为ti.试设计一个算法找出完成这n个任务的最佳调度,使得完成全部任务的时间最早. 对任意给定的整数n和k,以及完成任务i需要的时 ...

  10. Java实现 LeetCode 547 朋友圈(并查集?)

    547. 朋友圈 班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递性.如果已知 A 是 B 的朋友,B 是 C 的朋友,那么我们可以认为 A 也是 C 的朋友.所谓的朋友圈,是指 ...