VueRouter

Devil
150 阅读3分钟

这是我参与 8 月更文挑战的第 7 天，活动详情查看： 8月更文挑战

单页应用

  • SPA(Single Page Application)单页面应用程序，简称单页应用。
  • 指的是网站的“所有”功能都在单个页面中进行呈现。
  • 具有代表性的有后台管理系统、移动端、小程序等。

总结

优点

  • 前后端分离开发，提高了开发效率
  • 业务场景切换，局部更新结构
  • 用户体验好，更加接近本地应用

缺点

  • 不利于SEO
  • 初次首屏加载速度较慢
  • 页面复杂度比较高

前端路由

  • 指的是：URL与内容间的映射关系
  • 后端路由：指的是不同的接口与处理函数之间的关系

hash方式

  • 通过hashchange事件监听hash变化，并进行网页内容更新。

hash方式特点总结

  • 兼容性更好
  • 地址中有#,不太美观
  • 前进后退功能较为繁琐。

history方式

  • 使用HTML5提供的新功能实现前端路由。
  • 在操作时需要通过history.pushState()变更URL并执行对应操作。
  • history.pushState()
    • 当前的状态对象
    • 标题title（null / ''）
    • 希望将url设置为那个参数。
  • 代码展示
<div id="app">
    <a href="/">首页</a>
    <a href="/category">分类</a>
    <a href="/user">用户</a>
</div>
<p id = 'container'>这是首页功能</p>

var router = {
    routers:{},
    route:function(path,callback){
        this.routers[path] = callback;
    },
    go:function(path){
        // 通过变更URL并执行对应操作
        history.pushState(null,null,path);
        this.routers[path] && this.routers[path]();
    }
}
// 定义路由规则
router.route('/',function(){
    container.innerHTML = '这是首页功能';
});
router.route('/category',function(){
    container.innerHTML = '这是分类功能';
});
router.route('/user',function(){
    container.innerHTML = '这是用户功能';
});

var links = document.querySelectorAll('a');
var container = document.getElementById('container');
links.forEach(function(ele){
    ele.onclick = function(e){
        var path = e.target.getAttribute('href');
        // 调用路由
        router.go(path);
        return false;
    }
});

实现前进后退功能

  • 需要在更改url时保存路由标记。
  • 通过popstate事件监听前进后退按钮操作，并检测state
  • 代码演示
go:function(path){
    // 通过变更URL并执行对应操作
    history.pushState({path:path},null,path);
    this.routers[path] && this.routers[path]();
}
// 定义事件监听函数
init:function(){
    // 通过popstate事件监听前进后退按钮操作
    var that = this;
    window.addEventListener('popstate',function(e){
        var path = e.state ? e.state.path : '/';
        that.routers[path] && that.routers[path]();
    });
}

总结

  • 没有#，更加美观，符合前端的路由格式
  • 通过hash方式的时候，信息需要在url中进行传递，最大为2k。而通过pushstate方法，最大可以存储640k数据。
  • 缺点：h5功能，兼容性比较差。
  • 刷新的时候，需要后端的支持。

Vue Router

  • Vue Router是Vue.js的官方插件，用来快速实现单页应用。

基本使用

下载

使用

  • Vue Router提供了用于进行路由设置的组件<router-link>与<router-view>
  • 步骤：
    • 定义路由中需要的组件，并进行路由规则设置。
    • 创建Vue Router实例，通过routers属性配置路由。
    • 创建Vue实例，通过router属性注入路由。
  • 代码演示
<div id="app">
    <router-link to = '/'>首页</router-link>
    <router-link to = '/category'>分类</router-link>
    <router-link to = '/user'>用户</router-link>
    <router-view></router-view>
</div>

// 创建组件
var Index = {
    template:`<div>这是首页功能</div>`
};
var Category = {
    template:`<div>这是分类功能</div>`
};
var User = {
    template:`<div>这是用户功能</div>`
};
// 定义路由规则
var routes = [
    {path:'/',component:Index},
    {path:'/category',component:Category},
    {path:'/user',component:User}
];

// 创建Vue Router实例，通过routers属性配置路由。
var router = new VueRouter({
    routes:routes
});
//创建Vue实例，通过router属性注入路由。
var vm = new Vue({
    el:'#app',
    router:router
});

命名视图

  • 因为一个<router-view>只能显示一个组件，因此切换url之后需要加载多个组件时，需要写多个<router-view>

动态路由

  • 将某一类URL都映射到同一个组件，就需要使用动态路由。
  • 核心点：动态路由切换时，组件是复用而不是重新创建。为了能在路由切换时，监控到参数的变化，就需要使用侦听器。

问题

  • 直接将$router.paramters.id写在组件里面，就会造成组件和路由高度耦合。

解决组件和路由的解耦

  • 适用场景：组件需要在多个场景中适用。
avatar
文章
阅读
粉丝