什么是前端路由？

路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。

在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。

如何实现前端路由？

要实现前端路由，需要解决两个核心：

如何改变 URL 却不引起页面刷新？
如何检测 URL 变化了？

下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。

hash 实现

hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新
通过 hashchange 事件监听 URL 的变化，改变 URL 的方式只有这几种：通过浏览器前进后退改变 URL、通过<a>标签改变 URL、通过window.location改变URL，这几种情况改变 URL 都会触发 hashchange 事件

history 实现

history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新
history 提供类似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通过浏览器前进后退改变 URL 时会触发 popstate 事件，通过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/replaceState的调用和<a>标签的点击事件来检测 URL 变化，所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。

前端所谓路由：KV键值对。

key： URL（地址栏中的路径）

value：相应的路由组件

注意：项目的上中下结构

Header与Footer组件的注册

创建组件的时候，组件结构+组件的样式+图片资源

在APP.vue中引入组件=>注册组件=>使用组件

<template><div><Header></Header><router-view></router-view><!--  在Home、Search显示，在登录、注册隐藏  --><Footer v-show="$route.meta.show"></Footer></div>
</template><script>
// 引入
import Header from './components/Header'
import Footer from './components/Footer'export default {name: '',components: {Header,Footer}
}
</script>
<style scoped>
</style>

注意：项目采用的less样式的时候，浏览器不识别less样式，需要通过less、less-loader[安装5版本]进行处理less，把less样式变为css样式，浏览器才可以识别。如果不指定版本，它会默认安装最新版本。这里使用5版本的

npm i --save less less-loader@5

如果想让组件识别less样式，需要在style标签的身上加上lang=“less”属性

附：清除浏览器中的默认样式

@import "./iconfont.css";/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {margin: 0;padding: 0;
}/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie *//*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */color: #333;
}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//* 重置列表元素 */
ul, ol { list-style: none; }/* 重置文本格式元素 */
a { text-decoration: none; color: #666;}/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}/* 重置表格元素 */
table {border-collapse: collapse;border-spacing: 0;
}/* 重置 hr */
hr {border: none;height: 1px;
}
.clearFix::after{content:"";display: block;clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }a:link:hover{color : rgb(79, 76, 212) !important;text-decoration: underline;
}/* 清除浮动 */
.clearfix::after {display: block;height: 0;content: "";clear: both;visibility: hidden;
}

在index.html文件中的head内全局引入文件

<!--   引入清除默认的样式   -->
<link rel="stylesheet" href="./reset.css">

路由组件的搭建

先下载router路由插件

npm i --save vue-router

components文件夹：经常放置的非路由组件（共用全局组件）
pages|views文件夹：经常放置路由组件

router文件下的index.js文件

项目当中配置的路由一般放置在router文件夹中

// 配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'// 使用插件
Vue.use(VueRouter)// 引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'// 配置路由,new一个VueRouter实例
export default new VueRouter({routes：[{path: "/home",component: Home}, {path: "/search/:keyword?",component: Search,}, {path: "/login",component: Login,}, {path: "/register",component: Register,}, { // 重定向，在项目跑起来的时候，访问/，立马让它定向到首页path: '*',name: 'Home',},
})

总结：
路由组件与非路由组件的区别

路由组件一般放置在pages|views文件夹，非路由组件一般放置在components文件夹中
路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件
注册完路由，不管路由组件、还是非路由组件身上都有$route\$router属性

$route：一般获取路由信息【路径、query、params等等】
$router：一般进行编程式导航进行路由跳转【push|replace】

注册路由：底下的写法KV一致省略V【router小写的】
注册路由信息：当这里书写router的时候，组件身上都拥有$route,$router属性

路由的跳转

路由的跳转有两种形式：

声明式导航router-link，没有其他业务逻辑，单纯地页面跳转

<!--      声明式导航：务必要有to属性      -->
<router-link to="/login">登录</router-link>

编程式导航push|replace，可以添加其他业务逻辑

在绑定的函数中：

goSearch() {this.$router.push("/search");
}

注意：编程式导航：声明式导航能做的，编程式导航都能做；但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑

路由元信息的使用

例如，Footer组件显示与隐藏。

1.使用显示或者隐藏组件：v-if|v-show
Footer组件：在Home、Search显示Footer组件
Footer组件：在登录、注册时候隐藏的

2.使用路由元信息

我们可以根据组件身上的$route获取当前的路由信息，通过路由路径判断Footer显示与隐藏。

export default new VueRouter({routes：[{path: "/home",component: Home,meta: {show: true}}, {path: "/search/:keyword?",component: Search,meta: {show: true},}, {path: "/login",component: Login,meta: {show: false}}, {path: "/register",component: Register,meta: {show: false}}, { // 重定向，在项目跑起来的时候，访问/，立马让它定向到首页path: '*',name: 'Home',},
})

在组件中使用路由元信息

<Footer v-show="$route.meta.show"></Footer>

注意：配置的路由的时候，可以给路由添加路由元信息【mate】，路由需要配置对象，他的key不能自定义

路由传参

路由跳转有几种方式比如：A=>B

声明式导航：router-link(务必要有to属性),可以实现路由的跳转

编程式导航：利用的是组件实例的$router.push|replace方法，可以实现路由跳转(可以书写一些自己的业务)

路由传参有几种写法？

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位

query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位

<h1>params参数{{ $route.params.keyword }}</h1>
<h1>query参数{{ $route.query.k }}</h1>

第一种：字符串形式


this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())

第二种：模板字符串

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

第三种：对象（常用写法）

注意，在使用这种写法前，要给路由命名

{path: "/search/:keyword?",component: Search,meta: {show: true},name: "search"
},

this.$router.push({name: "search", params: {keyword: this.keyword}, query: {k: this.keyword.toUpperCase()}})

项目的路由vue-router相关推荐

Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
正常的vite创建项目并且安装vue router，vant的代码示例
[dalaojun@localhost django_luichun]$ npm init @vitejs/app my-vue-app -- --template vueScaffolding pr ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点实现SPA的几个关键点理解SPA单页面架构什么是前端路由锚链接与URL中的hash值通过hashch ...
（50）Vue Router插件介绍
一.Vue Router插件介绍 Vue Router 是 Vue.js 的官方插件,用来快速实现单页应用. 二.Vue Router学习内容 • 单页应用 • 前端路由 • Vue Router 三 ...
vue项目没有router文件夹_vue项目——Vue Router路由的使用
前言: 学习vue也有一段时间了,这里把学习整个vue项目中的一些知识点和问题,整理下方便自己记录,也希望给大家带来方便.我会连续写几篇系统的文章,讲解一个完整的vue项目中用到的各个使用模块.今天先 ...
vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...

项目的路由vue-router

什么是前端路由？

如何实现前端路由？

Header与Footer组件的注册

路由组件的搭建

路由的跳转

声明式导航router-link，没有其他业务逻辑，单纯地页面跳转

编程式导航push|replace，可以添加其他业务逻辑

路由元信息的使用

路由传参

路由跳转有几种方式比如：A=>B

路由传参有几种写法？

项目的路由vue-router相关推荐

最新文章

热门文章

项目的路由vue-router

什么是前端路由？

如何实现前端路由？

Header与Footer组件的注册

路由组件的搭建

路由的跳转

声明式导航router-link，没有其他业务逻辑，单纯地页面跳转

编程式导航push|replace，可以添加其他业务逻辑

路由元信息的使用

路由传参

路由跳转有几种方式 比如：A=>B

路由传参有几种写法？

项目的路由vue-router相关推荐

最新文章

热门文章

路由跳转有几种方式比如：A=>B