目录
一、vue2的前端路由（vue-router）
1、路由：页面地址与组件之间的对应关系
2、路由方式：服务器端路由、前端路由
3、前端路由：在前端维护一组路由规则（地址和组件之间的对应关系），模式有两种：
4、SPA：Vue适合开发单页面应用（Single Page Application）
5、前端路由的工作方式：
6、vue-router路由模块：是由vue.js官方给出的前端路由模块，只能和vue项目结合，方便SPA项目实现组件之间的切换
7、示例：
8、vue-router中常用的方法
三、动态路由
1、什么是动态路由： 将URL地址中可变的内容设置成参数，根据不同的参数渲染不同的组件。（组件可以复用）
2、在组件中得到动态的路由参数：this.$route.params.参数名
3、$route和$router的区别：
四、命名路由
1、什么是命名路由?
2、在 < router-link >中使用name进行映射
4、路由懒加载
3、缓存路由组件
五、命名视图
1、给< router-view >指定名称：在使用时如没有给< router-view >设置名称，默认为default，可以定义多个路由视图，每个路由视图都指定名称
2、在路由表中给路由项添加components属性：将组件渲染到给定名称的视图中
六、声明式导航 & 编程式导航
1、声明式导航：以超链接方式实现的页面跳转，就是声明式导航
2、编程式导航：通过javascript提供的api方法实现页面的跳转，就是编程式导航
3、vue-router中提供的编程式导航的API
一、vue2的前端路由（vue-router）
1、路由：页面地址与组件之间的对应关系
2、路由方式：服务器端路由、前端路由
3、前端路由：在前端维护一组路由规则（地址和组件之间的对应关系），模式有两种：
（1）hash模式：类似于锚点。在地址前带有#
（2）History模式：由Html5使用，地址前不带#，地址之间用’/‘分隔。需要服务器端的辅助
4、SPA：Vue适合开发单页面应用（Single Page Application）
一个Web网站只有一个html页面，所有组件的切换都在一个页面中完成。组件之间的切换是通过前端路由来实现的
5、前端路由的工作方式：
（1）用户点击页面中的路由链接
（2）URL的hash地址就会发生改变
（3）前端路由监听到了URL的改变
（4）前端路由会查找路由表，将hash地址对应的组件渲染到浏览器中
6、vue-router路由模块：是由vue.js官方给出的前端路由模块，只能和vue项目结合，方便SPA项目实现组件之间的切换
（1）vue-router的版本：
A、vue2中使用vue-router3：npm install vue-router@3
B、vue3中使用vue-router4： npm install vue-router@4
（2）vue-router的组成部分：
A、VueRouter：路由器类（路由器组件），用来维护路由表（URL地址与组件的映射）
B、router-link：路由链接组件，本质就是标签，路由请求的用户接口
C、router-view：路由视图组件（路由出口），主要负责渲染组件
7、示例：
（1）创建自定义组件
（2）在src下创建router/index.js：创建路由器实例（3）在src/main.js入口文件中挂载路由器
（3）在src/main.js入口文件中挂载路由器
（4）在App.vue中声明路由链接：和渲染组件的
（5）在src/router/index.js中维护一个路由表
8、vue-router中常用的方法
（1）路由重定向：使用redirect 属性，用户在访问地址A时，强制用户跳转到地址C
const router = new VueRouter({
routes:[
{path:'/',redirect:'/Home'}
]
})（2）嵌套路由：在组件中嵌套显示组件（通过路由实现组件的嵌套显示）
嵌套路由也称为多级路由，具体配置如下
const routes = [
{
path: '/admin',
component: Home,
children:[
{
path:'studentList', //二级路由前面不要带 /
component:StudentList
},
{
path:'studentAdd', //二级路由前面不要带 /
component:StudentAdd
}
]
},
]三、动态路由
1、什么是动态路由： 将URL地址中可变的内容设置成参数，根据不同的参数渲染不同的组件。（组件可以复用）
2、在组件中得到动态的路由参数：this.$route.params.参数名
3、$route和$router的区别：
（1）$router：
A、是VueRouter的实例，是一个全局的路由对象。用户可以在任何地方使用
B、包含了所有的路由对象（实际代表的路由文件—- 路由表、路由模式）
C、可以通过$router进行路由跳转（push、replace）
（2）$route：
A、代表当前正在跳转的路由对象，是一个局部对象
B、每个路由都有一个$route
C、用法：this.$route后面跟name、path、params、query
四、命名路由
1、什么是命名路由?
在路由表中给路由项设置name属性
2、在 < router-link >中使用name进行映射
4、路由懒加载
通过懒加载不会一次性加载所有组件，而是访问到组件的时候才加载。这样的处理对组件比较多的应用会提高首次加载速度。
3、缓存路由组件
作用：让不展示的路由组件保持挂载，不被销毁
<keep-alive include="StudentAdd">
<router-view></router-view>
</keep-alive>include是指定哪些组件会被缓存，其中include中的值是和组件中name名称对应的，如下所示
注意：如果要设置哪个组件会被缓存起来，就必须要额外的去指定组件的name属性
export default {
name:'StudentAdd'
}五、命名视图
1、给< router-view >指定名称：在使用时如没有给< router-view >设置名称，默认为default，可以定义多个路由视图，每个路由视图都指定名称
2、在路由表中给路由项添加components属性：将组件渲染到给定名称的视图中
六、声明式导航 & 编程式导航
1、声明式导航：以超链接方式实现的页面跳转，就是声明式导航
< a href=’url’> 链接文本或图像 < /a >
< router-link to=’url’ > 链接文本或图像 < /router-link >
2、编程式导航：通过javascript提供的api方法实现页面的跳转，就是编程式导航
location.href = 'url'
location.go(number)
location.replace(‘url’)
3、vue-router中提供的编程式导航的API
（1）this.$router.push(‘url’)：将’url’添加到路由表中，增加了一条路由记录
（2）this.$router.replace(‘url’)：跳转到url中，并替换掉当前的历史记录
（3）this.$router.go(number)：参数是一个数值，页面跳转到指定的位置
（4）this.$router.go()的简化写法：
A、this.$router.back()：后退
B、this.$router.forword()：前进
