前端路由

什么是路由

路由这个概念最先是后端出现的。通过服务器渲染,直接返回页面。
其响应过程是这样的

  1. 浏览器发出请求
  2. 服务器监听到80端口(或443)有请求过来,并解析url路径
  3. 根据服务器的路由配置,返回相应信息
  4. 浏览器根据数据包的Content-Type来决定如何解析数据

路由的作用

路由就是用来跟服务器进行交互的一种方式,通过不同的路径,来请求不同的资源。

Vue-router

原理就是检测 url 的变化,截获 url 地址,然后解析来匹配路由规则。
但是每次改变url都会去刷新页面,所以通过 hash 来实现路由。hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。另外每次 hash 值的变化,还会触发 hashchange 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。

Go to Foo Go to Bar

router-link其实就是一个不会页面跳转的a标签,会在url上加上hash
类似

http://192.168.1.100:8081/src/lizi.html#/foo

#后面就是hash
router-view标签会根据路由的配置把相应的组件给渲染出来,并替换掉router-view标签。



首先在引入vue后再引入vue-router

//定义两个组件对象
let Foo = { template: '
foo
'} let Bar = { template: '
bar
'} //定义路由 let routes = [{ path: "/foo", component: Foo}, { path: "/bar", component: Bar}] //创建 router 实例,然后传 `routes` 配置 let router = new VueRouter({ routes: routes }) //创建和挂载根实例,通过 router 配置参数注入路由 let app = new Vue({ el: "#app", router: router })

你可能感兴趣的:(前端路由)