Vue-day-05（路由概念与原理，Vue-router，路由

作者: 新苡米 | 来源:发表于2021-03-23 16:40 被阅读0次

1 路由的基本概念与原理

1.1路由:
前端路由
后端路由

介绍

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。

那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由
1). 后端路由是由服务器端进行实现，并完成资源的分发（url与资源/数据的对应关系）
2). 前端路由是依靠hash值(锚点链接)的变化进行实现（锚点与组件之间的关系）

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由

前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系

前端路由主要做的事情就是监听事件并分发执行事件处理函数

1.2后端路由

介绍：

image.png

1.3SPA

总结：

image.png

后端渲染界面，只要有一处修改，就需要刷新整个界面，存在性能问题
Ajax可以局部刷新，但是不支持前进后退
spa可以局部刷新，也支持前进后退

1.4 前端路由

image.png

1.5 路由总结

路由：表示一种对应关系，某些事物的一一对应的关系

后端路由：url与后端资源的一一对应的关系

前端路由：用户事件与事件处理函数一一对应的关系

1.6 实现简易前端路由

介绍
- 前端路由是基于hash值的变化进行实现的
  - 这里的hash值指的是url的hash值，也就是界面的锚点
- 比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换
- 核心实现依靠一个事件，即监听hash值变化的事件

window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

案例：
核心思路：

在页面中有一个vue实例对象，vue实例对象中有四个组件，分别是tab栏切换需要显示的组件内容

在页面中有四个超链接，如下：

当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件

在触发onhashchange事件的时候，我们根据hash值来让不同的组件进行显示：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <!-- 导入 vue 文件 -->
        <script src="./lib/vue_2.5.22.js"></script>
    </head>
    <body>
        <!-- 被 vue 实例控制的 div 区域 -->
        <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a> 
        <a href="#/keji">科技</a> 
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
        <!-- 可以把 component 标签当做是【组件的占位符】 -->
        <component :is="comName"></component>
        </div>

        <script>
        // #region 定义需要被切换的 4 个组件
        // 主页组件
        const zhuye = {
            template: '<h1>主页信息</h1>'
        }

        // 科技组件
        const keji = {
            template: '<h1>科技信息</h1>'
        }

        // 财经组件
        const caijing = {
            template: '<h1>财经信息</h1>'
        }

        // 娱乐组件
        const yule = {
            template: '<h1>娱乐信息</h1>'
        }
        // #endregion

        // #region vue 实例对象
        const vm = new Vue({
            el: '#app',
            data: {
            comName: 'zhuye'
            },
            // 注册私有组件
            components: {
            zhuye,
            keji,
            caijing,
            yule
            }
        })
        // #endregion

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch(location.hash.slice(1)){
            case '/zhuye':
                vm.comName = 'zhuye'
            break
            case '/keji':
                vm.comName = 'keji'
            break
            case '/caijing':
                vm.comName = 'caijing'
            break
            case '/yule':
                vm.comName = 'yule'
            break
            }
        }
        </script>
    </body>
    </html>

2 vue-router的基本使用

2.1 基本使用

介绍
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
官网：https://router.vuejs.org/zh/

Vue Router的特性：

支持H5历史模式或者hash模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

....

基本使用步骤:
1.导入js文件
2.添加路由链接
3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
4.定义路由组件
5.配置路由规则并创建路由实例
6.将路由挂载到Vue实例中

1.导入js文件

image.png
2.添加路由链接

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

image.png

router-view：路由-视图，显示用户点击的路由链接对应的组件

视图：组件可以显示出具体内容，可以理解为视图

例如：用户点击User路由链接，就会将User组件显示到这里

4.定义路由组件

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

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

image.png

router是：router:router的简写

如果VueRouter的实例名是xxx，那挂载时，就需要写：router:xxx

Vue实例化时，参数el，data，methods，router都是固定的

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!--1. 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!--2. 添加路由链接：to渲染成href。to的值渲染成#hash值（锚点）-->
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link><!--<a href="#/user"> User</a>-->
      <router-link to="/register">Register</router-link>

      <!-- 3.路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
     //4.定义路由组件
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }
    //5. 配置路由规则，并创建路由实例
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        //6.挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

2.2 路由重定向

介绍：

image.png

rediret：重定向

普通的路由是定义path和component，访问url显示对应组件

重定向路由是定义path和redirect，访问url跳转到另一个url

代码：

//将上一个案例的路由规则增加一个重定向：
// 创建路由实例对象
const router = new VueRouter({
    // 所有的路由规则
    routes: [
        { path: '/', redirect: '/user'},//增加这一行代码，如果访问跟路径/，则重定向到/user
        { path: '/user', component: User },
        { path: '/register', component: Register }
    ]
})

效果：

再访问：03.路由重定向.html
会跳转：03.路由重定向.html#/user

3 vue-router嵌套路由

通过路由嵌套，可以处理复杂的界面

嵌套路由功能分析：如下图：点击Register之后发现Register组件中嵌套了另一块内容

步骤：
1. 父路由组件模板

image.png

2 子级路由模板

image.png

因为子级模板是哎register组件内显示的，所以应该定义在register组件的template中

在template添加路由连接，子url是/register开头

在template添加router-view，给子组件占位

3 路由嵌套配置

image.png

作为register的子组件，那么就需要在register的children属性中定义路由规则
代码：

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

总结：

关于router-view和router-link的书写位置：

路由规则在哪定义的，router-view和router-link就写在谁的模板中

Register和User定义在vm中，那么他们的router-view和router-link就定义在app中

app这个div就可以理解为vm的模板

Register和User可以理解为vm的子组件

Tab1和Tab2定义在Register中，那么他们的router-view和router-link就定义Register中的模板中

路由规则在哪定义的，决定了自己的父组件是谁，那么子组件的router-view和router-link就定义在父组件的模板中

分析图：

image.png

4 vue-router动态路由匹配

4.1 动态路由匹配

需求：点击不同的用户连接，显示对应的用户信息

定义如下路由链接和路由规则，是否可行？

image.png
动态路由匹配介绍:

image.png

匹配规则定义时，动态路由语法为：参数名，以冒号开头，就代表是动态匹配

路由组件定义时，获取路由参数为：{{$route.params.参数名}}

$route.params.是固定写法

Vue实例的属性，都是 $开头，比如$ el

// 创建 vm 实例对象
const vm = new Vue({
    // 指定控制的区域
    el: '#app',
    data: {},
    // 挂载路由实例对象
    // router: router
    router
})

创建Vue实例时，传递的参数有：el,data,router

那么vm有了 $el，$ data，$router属性

但是获取动态参数，是{{$route.params.参数名}}

代码：

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

4.2 路由组件传递参数

介绍:

image.png

就是在组件中想要获取路由参数，需要通过{{$route.params.id}}来获取，比较麻烦

4.2.1 props的值为布尔类型

image.png

路由定义规则中：props:true，代表给动态参数id，开启props传参（其实就是通过props方式传递参数）

路由组件定义中：通过props接收参数

这样就不用通过{{$route.params.id}}获取

其实这个跟之前的组件通过属性传递数据是类似的：

<User id='1'></User>
这个1就会传递给User组件的props属性id

代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
      <User id='1'></User>
    </div>

    <script>
      const User = {
        props: ['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: true },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

内部原理：

image.png

4.2.2 props的值为对象类型

介绍：

image.png

uname的lisi传递给User组件中props的uname，age的12传递给User组件中props的age

这时的id就无法获取了，所以id在这种方式中就废了

只有props为true时，才会将:id作为参数传递给User

代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        //这个id其实是拿不到值的
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

4.2.3 props的值为函数类型

介绍：

image.png

props指定了一个箭头函数：相当于如下代码

 ``` props:function (route){
      return {uname:'zs',age:20,id:route.params.id}
  }```

箭头函数返回了一个对象，对象中的数据，就是要传递的数据

uname和age是定死的值

router是箭头函数的形参，系统在调用时会将$route传递进去

id是通过route.params.id动态获取到id参数的值
代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

5. vue-router命名路由

介绍：

image.png

这样就不用在定义路由链接得时候，在to中写具体的path了

有时候path比较复杂，用名字代替会更好一点

如果path中有参数，那么在to中就通过params来确定参数的值

相当于：
<router-link to="/user/123">User2</router-link>
代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <!--原来写法，可能你会更喜欢原来的写法，但是如果path比较复杂时，用命名路由会更好-->
      <router-link to="/user/3">User2</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

6. vue-router编程式导航

6.1 页面导航的两种方式

image.png

声明式导航，其实就是html实现导航

编程时导航，其实就是js代码实现导航（location.href就是js代码）

页面导航，其实就是页面跳转

6.2 编程导航

基本用法

image.png

push跳转锚点

go前进后退，参数n一个数字，代表前进后退几个界面

n，代表前进n个界面

-n，代表后退n个界面

代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
          <button @click="goRegister">跳转到注册页面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')//跳转到注册页面（锚点），可以看下效果
          }
        },
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)//-1：后退1个界面
          }
        }
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

6.3 push参数 (了解)

介绍

image.png

跟route-link是一样的作用，都是实现页面跳转

所以push中可以直接写path路径（路由），也可以写命名路由

相当于：

<!--前两个对应这个  -->
<router-link to="/home">User1</router-link>
<!--#push中的name应该也不带斜杠才对-->
<router-link :to="{ name: 'user', params: {userId: 123} }">User123</router-link>
<router-link to="/register?uname=lisi">Register</router-link>

Vue-day-05（路由概念与原理，Vue-router，路由

1 路由的基本概念与原理

1.2后端路由

1.3SPA

1.4 前端路由

1.5 路由总结

1.6 实现简易前端路由

2 vue-router的基本使用

2.1 基本使用

2.2 路由重定向

3 vue-router嵌套路由

4 vue-router动态路由匹配

4.1 动态路由匹配

4.2 路由组件传递参数

4.2.1 props的值为布尔类型

4.2.2 props的值为对象类型

4.2.3 props的值为函数类型

5. vue-router命名路由

6. vue-router编程式导航

6.1 页面导航的两种方式

6.2 编程导航

6.3 push参数 (了解)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读