【前端vue——系列1】vue的路由

系列文章总结

【前端vue——系列1】vue的路由
【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理
【前端vue——系列3】vue框架的优缺点；vue实现双向绑定
【前端vue——系列4】vuex和angular
【前端vue——系列5】生命周期详讲（vue的生命周期、页面的生命周期）

---

)

---

前言

路由就是指一个指向的意思，当我点击路由跳转时，页面就会跳转到目标路由

• route，它是一条路由，Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
• routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 =>about 内容}]
• router 是一个机制，相当于一个管理者，它来管理路由。因为routes只是定义了一组路由，它放在那里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了home 内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、SPA是什么？

SPA是指单页面一次性请求到web的所有代码（html、js、css），然后根据路由切换到不同模块的资源
单页面与多页面的不同在于以下几点：

	单页面（spa）	多页面（mpa）
url模式	哈希模式（hash）	历史模式（history）
刷新方式	局部刷新	全局刷新
组成	一个主页面和多个页面片段	多个主页面
数据传递	容易（路由传参）	通过url、cookie、localstorage
页面切换	速度快	需要加载资源、速度慢
SEO搜索引擎优化	难实现，不过可以通过ssr方式改善	容易实现

相较于多页面（mpa）应用来说，单页面（spa）除了搜索引擎难以抓取外，各方面性能都是优于多页面应用的。

二、vue-router

1.hash模式

hash是体现在地址栏URL中的#符号

代码如下

URL：http://www.abc.com/#/hello

hash 的值为 #/hello。hash虽然出现在url中，但它不会被包括在http请求中的，所以改变hash不会重新加载页面，路由跳转是通过监听url中的hash来进行的

2.history模式

history —— 利用了HTML5 History Interface 中新增的push和replace两类方法。
相比于hash模式，history是通过在浏览器的历史记录栈中通过go、forward，对历史记录进行修改的功能，虽然这个history模式改变了相应的url地址，但是浏览器并不会向后端发送请求。
代码如下（示例）：

const router = new VueRouter（{
  mode：'history',
  routes:[...]
  })

该处即是使用了history模式，得到的url就不会有#而是/。

---

3.两种模式的比较

解释一个矛盾的地方：hash模式对于后台来说是一个url，地址中的hash值是不会传到后台的，所以服务器端做一个跟地址的映射就行-这就解释了为什么hash的值是不会传到后台的。

模式	缺点	优点
history	需要后台配合	地址明确，便于后台处理
hash	在url中以hash存在，不能传输到后台	使用简单，无需后台支持

二、路由跳转

1.最基本的跳转：

to="/demo1"中的demo1为跳转的路由跳转位置。这种方式简便易懂，直接在标签中嵌入按钮就可以，但是不足的是不能够传递参数。

<router-link to="/demo1">点击跳转</router-link>

---

2.带参数的跳转：

name为跳转路由的名字（此处需要在index.js中配置)，params中为传递的参数的值，此种方法跳转简单，传参简单。易于操作。

<router-link v-bind:to="{name:'demo1',params:{userId:123}}">点击跳转传参</router-link>

//下面为在index.js中配置的代码
{
      path: '/demo1/:userId',
      name: 'demo1',
      component: Demo1
},

---

如果不想配置，也可以直接指向路径：
path:'/home/game'

<router-link v-bind:to="{path:'/home/demo1',params:{userId:123}}">点击跳转传参</router-link>

---

3.js跳转转：

通过在标签中加入button，点击button进入到toURL函数进行路由跳转。

<button @click="jump">跳转页面</button>

<script>
export default {
    data(){
        return{
        }
    },
    methods:{
        jump(){
            this.$router.push({name:'demo1',params:{userId:123},query:{plan:"public",sex:"female"}});
        }
    }
}
</script>

---

4.关于传参方式和子路由接收参数方式

vue中的路由传参主要是分为两种方式：params和query。

---

4.1 params传参：

此时浏览器的地址中是不会带有参数的，是类似post传参，并且刷新后参数会丢失。

 this.$router.push({name: 'myPathName', params: {id: '1234'}});

子路由获取参数的方式是：

let id = this.$route.params.id;

4.2 query传参：

query传参就类似get传参那样将参数写在路径后

 this.$router.push({path: '/myPathComp', query: {id: '1234'}});

---

子路由获取参数的方式是：

let id = this.$route.query.id;

---

**码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~**