精华内容
下载资源
问答
  • 前端路由

    2021-04-05 14:39:44
    前端路由 1. 前端路由的概念 前端路由依靠hash值得变化进行实现,后端路由就是一个功能对应一个js文件; 前端路由得概念: 根据不同得事件来显示不同得页面内容,就是事件与事件处理函数之间得对应关系,前端路由...

    前端路由

    1. 前端路由的概念

    前端路由依靠hash值得变化进行实现,后端路由就是一个功能对应一个js文件;
    前端路由得概念: 根据不同得事件来显示不同得页面内容,就是事件与事件处理函数之间得对应关系,前端路由主要做的事情就是监听事件并分发执行事件处理函数;

    后端路由: URL请求地址与服务器资源的对应;

    2. 前端路由的使用

    1. 手动模拟路由,通过监听hash值得改变来实现;
      HTML代码:
    <div id="app">
            <a href="#/zhuye">主页</a>
            <a href="#/keji">科技</a>
            <a href="#/caijing">财经</a>
            <a href="#/yule">娱乐</a>
            <component :is="comName"></component>
        </div>
    

    监听hash值的改变

     window.onhashchange = function() {
                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;
                    default:
                        vm.comName = 'zhuye';
                        break;
                }
            }
    

    对应的组件:
    在这里插入图片描述

    3. Vue Route路由的使用

    1. 先是引入相关文件:
    <script src="./lib/vue_2.5.22.js"></script>
        <script src="lib/vue-router_3.0.2.js"></script>
    
    1. 写路由链接,其中<router-view></router-view>是路由位置
    <div id="app">
            <router-link to="/user">User</router-link>
            <router-link to="/register">register</router-link>
            <router-view></router-view>
        </div>
    

    3.定义路由组件:
    在这里插入图片描述

    1. 创建路由对象,并创建规则:
      在这里插入图片描述
    2. 最后将路由挂载到实例上面
      在这里插入图片描述

    4. 路由嵌套

    在Login的模板字符串中写入子路由
    在这里插入图片描述
    然后在Login路由下面创建子路由
    在这里插入图片描述

    5. 路由动态参数配置

    在这里插入图片描述
    props:后面也可以是对象形式,或者写true只传id,User里面的props接收这里传过去的数据;
    在这里插入图片描述
    还可以给路由命名如name:'user'
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,922
精华内容 4,768
关键字:

前端路由