Node.js 单页应用 js生成页面

前端路由的由来及作用

地址栏输入URL地址，请求的要么是html页面，要么是后台的一个路由地址(或者是一个远程的路由端口数据地址)。但是，我们所有的页面全是js生成的，问题在于，比如我们就是要切换页面，但是在url地址栏现在就无法操作了。

为什么不直接在前端还是使用纯html+css+js直接引用的方法，而要用纯js的控制的模式？

原因：

1、页面跳转无法进行传值，它是静态的，只能通过js实现。

2、js是一种程序语言，控制更强，可以直接控制某个页面上的某一部分进行替换。

3、如果是html页面，js需要做更多的DOM操作，导致效率低下。

4、由于手机端的兴起，很多页面的操作都是模块化的。

目前，前端路由大致分为 2 种形式：

• hash 模式：+“#”号

  http://www.xxx.com/#/login

• history 模式

单页应用的操作步骤

之前我们是通过实例化进行页面变化，现在通过更改地址栏的路径实现单页的应用，需要借助中间件director.js

1、在html上引用中间件。

<script src="https://cdn.bootcdn.net/ajax/libs/Director/1.2.8/director.js"></script>

 

2、在main.js中写入Router的配置。

申明一个配置对象，把这个对象以参数的形式传给director.js里面的一个Router方法，在进行初始化。

 直接通过地址栏访问http://127.0.0.1:3000/#/login，就可以直接切换到登录。

/* 配置单页应用的中间件 */
let routes={
    "/login":()=>{//每一个配置都是一个键值对，值是一个函数
new Login();//表示输入键的地址，就会操作后面的值
    }
}


let router=Router(routes);//参数就是配置的对象
router.init();

 

3、主要是routes配置对象，前端路由。

对于我们现在来说，某一个hash的url地址对应某个对象，根据配置的路径，实例化不同的对象，在页面进行切换。

/* 配置单页应用的中间件 */

location.hash = location.hash || "#/login";//默认是登录页面

let routes={    
    "/":()=>{new Nav();},//类似于http://127.0.0.1:3000/#/index.html
    "/login":()=>{//每一个配置都是一个键值对，值是一个函数
new Login();//表示输入键的地址，就会操作后面的值
    },
    "/reg":()=>{//每一个配置都是一个键值对，值是一个函数
        new Reg();//表示输入键的地址，就会操作后面的值
            },
    "/manager":{//一个根目录下的子目录
        "/user":()=>{new User();}//主要后面的需要点击学生管理按钮后才会出现user页面
    },
     on:()=>{new Nav()},//访问直接先出来导航，但是需要一层一层，直接输入不行，所以需要configure这个参数配置
}


let router=Router(routes)configure({
    recurse: 'forward',
});//参数就是配置的对象
router.init();

 

4、在登录页面点击注册，注册页面点击登录，注册成功跳转登录，登录成功跳转主页。

 location.hash = "#/reg";//后面直接跟路径跳转

 

 

 5、注意一个问题：routes里面配置的是 路径----> 函数。