Vue路由

路由

---

一、什么是路由

1、后端路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。

2、前端路由

对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现。

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

二、路由的基本使用

1、引入vue-router.js

2、创建一个路由对象

使用 redirect 是让根目录重置（显示内容）

3、注册到 vm 实例上

4、两种跳转链接

4.1普通跳转链接

在路由中不建议这样

4.2路由跳转链接

加上 tag = " span " 可以使 a 标签变成 span 标签。（使用tag属性指定router-link渲染的标签类型）

5、使用css样式（默认名称或自定义）

默认名称是 router-link-active，如果想要自定义，则在路由对象中定义，linkActiveClass : ’ name '，再定义name.css。

6、引用路由自带容器

三、路由定义参数两种方法

第一种

例：router-link to="/login?id=10&name=zs"是以 ？和 & 连接的，用 $route.query.id。

第二种

例：router-link to="/login/12/ls" 是以 / 来连接的，用 $route.params.id。

四、路由的嵌套

使用 children 属性实现路由嵌套
主页是 account


效果图

五、总结

学习了路由的基本使用和两种传参方式，再来是路由的嵌套。