Vue框架之路由

◆ 路由的概念：

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

◆ 路由分类：

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

前端路由是依靠hash值(锚链接)的变化进行实现
后端路由是由服务器端进行实现，并完成资源的分发

◆ 前端路由的基本概念：

前端路由主要做的事情就是监听事件并分发执行事件处理函数，即根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系。

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

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

◆ 前端路由实现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>

◆ Vue Router：

Vue Router是一个Vue.js官方提供的路由管理器。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router。

◆ Vue Router的特性：

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

◆ Vue Router的使用步骤：

导入js文件
添加路由链接
添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
定义路由组件
配置路由规则并创建路由实例
将路由挂载到Vue实例中

示例：

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

◆ 路由重定向：

可以通过路由重定向为页面设置默认展示的组件。

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

◆ 路由嵌套：

当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

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

◆ 动态路由匹配：

通过/:参数名的形式传递参数

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 }
  ]
})

如果使用$route.params.id来获取路径传参的数据不够灵活。我们还可以采用如下方式：

我们可以通过props来接收参数

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 }
  ]
})

还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给
组件进行使用

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 }
  ]
})

如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式

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 }
  ]
})

◆ 命名路由：

命名路由就是给路由取别名，添加了别名之后，可以使用别名进行跳转

  <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="{ name: 'user', params: {id: 3} }">User3</router-link>
      
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

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

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

宅羽

发布了292 篇原创文章 · 获赞 6 · 访问量 4万+

私信关注