您的当前位置：首页正文

二、Vue Router-核心内容精讲

来源：欧得旅游网

Vue Router

一、Vue Router 回顾

1、路由简介

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

在开发中，路由分为：

后端路由
前端路由

后端路由

概念：根据不同的用户 URL 请求，返回不同的内容
本质：URL 请求地址与服务器资源之间的对应关系

SPA（Single Page Application）

Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求
在实现SPA过程中，最核心的技术点就是前端路由

前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

2、实现简易前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据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>

3、`vue-router`的基本使用

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。

基本使用的步骤：

下面看一下具体的实施过程

引入相关的库文件

<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->   
<script src="./lib/vue_2.5.22.js"></script> 
 
<!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 --> 
<script src="./lib/vue-router_3.0.2.js"></script>

添加路由链接

<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 --> 
<router-link to="/user">User</router-link> 
<router-link to="/register">Register</router-link>

添加路由填充位

<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->   
<router-view></router-view>

定义路由组件

 var User = {
    
     template: '<div>User</div>' 
  } 
  var Register = {
    
     template: '<div>Register</div>' 
  }

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

 // 创建路由实例对象   
var router = new VueRouter({
        
    // routes 是路由规则数组     
    routes: [       
        // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：   
        // path 表示当前路由规则匹配的 hash 地址     
        // component 表示当前路由规则对应要展示的组件     
       {
   path:'/user',component: User}, 
      {
   path:'/register',component: Register} 
    ] 
  })

把路由挂载到 Vue 根实例中

 new Vue({
    
     el: '#app',    
     // 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上      
     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>
    <!-- 导入 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: '<h1>Register 组件</h1>'
      }

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

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

4、路由重定向

var router = new VueRouter({
    
    routes: [      
        // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址  
        //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的组件为User
       {
   path:'/', redirect: '/user'}, 
      {
   path:'/user',component: User}, 
      {
   path:'/register',component: Register} 
    ] 
  })

具体实现的代码如下：

<!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>
    <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: '<h1>Register 组件</h1>'
      }

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

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

5、嵌套路由

嵌套路由功能分析

点击父级路由链接显示模板内容

模板内容中又有子级路由链接

点击子级路由链接显示子级模板内容

下面看一下实现的步骤

父路由组件模板

父级路由链接
父组件路由填充位

<p> 
      <router-link to="/user">User</router-link> 
      <router-link to="/register">Register</router-link> 
 </p> 
    <div>      
        <!-- 控制组件的显示位置 -->       
        <router-view></router-view> 
    </div>

以上的内容，在前面的课程中已经实现。

子级路由模板

子级路由链接
子级路由填充位

 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>` 
  }

嵌套路由配置

父级路由通过children属性配置子级路由

 const router = new VueRouter({
      
     routes: [      
         {
    path: '/user', component: User },      
         {
     path: '/register', component: Register,         
          // 通过 children 属性，为 /register 添加子路由规则        
          children: [ 
              {
    path: '/register/tab1', component: Tab1 },          
              {
    path: '/register/tab2', component: Tab2 }        
          ]       
         }     
     ]   
 })

具体代码实现如下：

<!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>
    <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>'
      }
     //修改Register组件
      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>
</html>

6、动态路由匹配

6.1 动态匹配路由的基本用法

思考：

<!– 有如下 3 个路由链接 --> 
<router-link to="/user/1">User1</router-link> 
<router-link to="/user/2">User2</router-link> 
<router-link to="/user/3">User3</router-link>

// 定义如下三个对应的路由规则，是否可行？？？
{
    path: '/user/1', component: User } 
{
    path: '/user/2', component: User } 
{
    path: '/user/3', component: User }

虽然以上规则可以匹配成功，但是这样写比较麻烦。如果有100个规则，那么写起来就会非常的麻烦。

通过观察，可以发现整个路由规则中只有后续的数字是在变化的。所以这里可以通过动态路由参数的模式进行路由匹配。

var router = new VueRouter({
    
  routes: [     
      // 动态路径参数 以冒号开头     
      {
    path: '/user/:id', component: User } 
  ] 
})

const User = {
      
    // 路由组件中通过$route.params获取路由参数 
    template: '<div>User {
   { $route.params.id }}</div>' 
}

具体代码实现如下：

<!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>
    <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>
</html>

6.2 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

第一种情况：

props的值为布尔类型

 const router = new VueRouter({
    
    routes: [       
        // 如果 props 被设置为 true，route.params 将会被设置为组件属性     
        {
    path: '/user/:id', component: User, props: true } 
    ] 
  }) 
 
  const User = {
    
            props: ['id'], // 使用 props 接收路由参数     
                template: '<div>用户ID：{
   { id }}</div>'  // 使用路由参数   
  }

在定义路由规则的时候，为其添加了props属性，并将其值设置为true.那么在组件中就可以通过props:['id']的形式来获取对应的参数值。

具体代码如下：

<!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>
    <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 = {
     
        props: ['id'], //获取id的值。
        template: '<h1>User 组件 -- 用户id为: {
     {id}}</h1>'
      }

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

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

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

第二种情况： props的值为对象类型

 const router = new VueRouter({
    
    routes: [       
        // 如果 props 是一个对象，它会被按原样设置为组件属性   
        //这里相当于给组件User,通过路由的形式传递了一个对象，而这时候id在User组件中就无法获取到了。
        {
    path: '/user/:id', component: User, props: {
    uname: 'lisi', age: 12 }} 
    ] 
  }) 
 
  const User = {
    
    props: ['uname', 'age'],   
      template: ‘<div>用户信息：{
   {
    uname + '---' + age}}</div>'  
}

具体代码实现如下：

<!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>
    <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 = {
     
        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: {
      uname: 'lisi', age: 20 } },
          {
      path: '/register', component: Register }
        ]
      })

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

在上面的代码中，在路由规则中，通过props向用户组件中传递了一个对象，那么在User用户组件中可以接收到传递过来的对象。但是参数id无法接收到。

如果要解决这个问题，可以使用props的值为函数类型。也就是给props传递一个函数。

第三种情况：props的值为函数类型

const router = new VueRouter({
    
    routes: [       
        // 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参  
        //route就是参数对象。
        {
    path: '/user/:id',  
        component: User,  
        props: route => ({
    uname: 'zs', age: 20, id: route.params.id })} 
    ] 
  }) 
 
  const User = {
    
    props: ['uname', 'age', 'id'],    
      template: ‘<div>用户信息：{
   {
    uname + '---' + age + '---' + id}}</div>'  
}

完整代码如下：

<!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>
    <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>