前端组技术分享-Vue Router

[开心学前端]

Vue Router

1.概念

这里的路由就是SPA（single page application单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

2.为什么不用a标签

因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以写的a标签是不起作用的，你必须使用vue-router来进行管理。

3.什么是单页应用

单页应用，顾名思义，就是整个应用只有一个主页面，其余的“页面”，实际上是一个个的“组件”。单页应用中的“页面跳转”，实际上是组件的切换，在这个过程中，只会更新局部资源，页面不会整个刷新，也就是说”局部刷新“。

4.路由

路由分为前端路由和后端路由 1)后端路由：

• 概念：根据不同的用户URL请求，返回不同的内容。

• 本质：URL请求地址与服务器资源之间的对应关系。是由服务器端进行实现，并完成资源的分发

2)SPA (Single Page Application)

• 后端渲染（存在性能问题）

• Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作)

• SPA(Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作

• SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)

• 在实现SPA过程中，最核心的技术点就是前端路由

3)前端路由是依靠hash值(锚链接)的变化进行实现

• 概念：根据不同的事件来显示不同的页面内容，

• 本质：用户事件与事件处理函数之间的对应关系。前端路由主要做的事情就是监听事件并分发执行事件处理函数

简单使用：前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换），核心实现依靠一个事件，即监听hash值变化的事件

 // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
  window.onhashchange = function() {
  // 通过 location.hash 获取到最新的 hash 值
 }

Hash

一个完整的 URL 包括：协议、域名、端口、虚拟目录、文件名、参数、锚。

hash 值指的是 URL 地址中的锚部分，也就是 # 后面的部分。hash 也称作锚点，是用来做页面定位的，与 hash 值对应的 DOM id 显示在可视区内。在 HTML5 的 history 新特性出现前，基本都是使用监听 hash 值来实现前端路由的。hash 值更新有以下几个特点：

• hash 值是网页的标志位，HTTP 请求不包含锚部分，对后端无影响

• 因为 HTTP 请求不包含锚部分，所以 hash 值改变时，不触发网页重载

• 改变 hash 值会改变浏览器的历史记录

• 改变 hash 值会触发 window.onhashchange() 事件

而改变 hash 值的方式有 3 种：

• a 标签使锚点值变化，例： <a href='#/home'></a>

• 通过设置 window.location.hash 的值

• 浏览器前进键（history.forword()）、后退键(history.back())

综上所述，这 3 种改变 hash 值的方式，并不会导致浏览器向服务器发送请求，浏览器不发出请求，也就不会刷新页面。hash 值改变，触发全局 window 对象上的 hashchange 事件。所以 hash 模式路由就是利用 hashchange 事件监听 URL 的变化，从而进行 DOM 操作来模拟页面跳转。

5.路由的作用

1. 根据url锚点路径，在容器中加载不同的模块，本质作用是做页面导航

2. 完成SPA (Singal Page Application)的开发

• 一种特殊的Web应用（单页应用）。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript, CSS。

• 一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML (采用的是div切换显示和隐藏)，从而实现UI与用户的交互

6.Vue Router的基本使用

• Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

步骤

1.导入js文件

2.添加路由链接

3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

4.定义路由组件

5.配置路由规则并创建路由实例

6.将路由挂载到Vue实例中

1.导入js文件
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
​
2.添加路由链接:
<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，
to属性的值会被渲染为#开头的hash地址
默认情况下，Vue 使用 a标签来渲染 router-link标签，可以通过router-link标签 tag 属性来指定用什么标签渲染
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
​
3.添加路由填充位（路由占位符）， 将来通过路由规则匹配到的组件，将会被渲染到router -view所在的位置。
<router-view></router-view>
​
4.定义路由组件
var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }
​
5.配置路由规则并创建路由实例
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})
​
6.将路由挂载到Vue实例中
new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})
​

路由重定向

• 路由重定向指的是:用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面;

• 可以通过路由重定向为页面设置默认展示的组件，在路由规则中添加一条路由规则即可，如下：

var myRouter = new VueRouter({
   //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

7.Vue Router的嵌套路由

• 嵌套路由也称之为子路由，就是在被切换的组件中又切换其他子组件

• 例如：在one界面中又有两个按钮，通过这两个按钮进一步切换one中的内容，一般都是这种，子路由定义到一级路由里面

var myRouter = new VueRouter({
   //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

 

8.Vue Router动态路由匹配

• 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。

• 例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』来达到这个效果。

//路由组件 通过$route.params.id来获取路径传参的数据
​
var User = { template:"<div>user：{{$route.params.id}}</div>"}
​
const router = new VueRouter({
    
    //routes是路由规则数组
    
  routes: [
​
    // 动态路径参数 以冒号开头
​
    { path: '/user/:id', component: User }
​
  ]
​
})

例如： /user/foo 和 /user/bar 都将映射到相同的路由。 一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。 你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。例如：

9.vue-router参数传递

Vue-router命名路由

• 命名路由的配置规则: 为了更加方便的表示路由的路径,可以给路由规则起一个别名, 即为“命名路由’.

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过name属性为路由添加一个别名
        { path: "/user/:id", component: User, name:"user"},
    ]
})

​

添加了别名之后，可以使用别名进行跳转

<router-link to="/user">User</router-link>
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>
​
//还可以编程式导航
myRouter.push( { name:'user' , params: {id:123} } )
​

编程式的导航 router.push

通过调用JavaScript形式的API实现导航的方式，叫做编程式导航 编程式导航传递参数有两种类型：字符串、对象。

1. 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：this.$router.push("home");

2. 对象 想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。

• 命名路由 命名路由的前提就是在注册路由的地方需要给路由命名，命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标 页面接收传递参数时使用params 特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的 使用方法如下：

this.$router.push({ name: 'news', params: { userId: 123 }})

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="routerTo">click here to news page</button>
  </div>
</template>
 

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    routerTo(){
      this.$router.push({ name: 'news', params: { userId: 123 }});
    }
  }
}
</script>
​
接受传递的参数：

<template>
  <div>
    this is the news page.the transform param is {{this.$route.params.userId}}
  </div>
</template>
​

• 查询参数 查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数而不能用name，目标页面接收传递的参数使用query。 注意：和name配对的是params，和path配对的是query 使用方法如下：

this.$router.push({ path: '/news', query: { userId: 123 }});

接收参数如下：

<template>
  <div>
    this is the news page.the transform param is {{this.$route.query.userId}}
  </div>
</template>

声明式的导航 <router-link to>

通过点击链接实现导航的方式，叫做声明式导航

1. 字符串

<router-link to="news">click to news page</router-link>

• 通过URL参数参数(?key=value&key-value)，通过this.$route.query.key获取

在组件的生命周期中通过以下方式获取数据 this.$route.query.name this.$route.query.age

• 通过占位符传递（路由规则中/:key/:key，路径中/value/value），通过this.$route.params.key获取

获取还是在组件的声明周期中this.$route.params.name

2.命名路由

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

3.查询参数

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

注意： 1.命名路由搭配params，刷新页面参数会丢失

2.查询参数搭配query，刷新页面数据不会丢失

3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值