2021-10-26 vue路由

路由的概念和原理

路由的本质是对应关系
后端路由：拦截查找返回 ------------（url----资源）
前端路由：监听触发返回-------------（事件----事件处理函数）

基本使用

先引入vue,在引入vue-router，因为后者在内部依赖前者




在new这个构造函数时，可以提供一个配置对象，其中有一个属性routes，他是一个数组
name表示命名路由，path当前路由规则匹配的hash地址，component当前路由规则对应要展示的组件

在ES6中，如果属性名和属性值一样，可以简写

路由重定向

嵌套路由

配置子路由链接和子组件的对应关系

动态路由匹配

某些路由规则，一部分是一样的，只有另一部分是动态变化的，这时可以把动态变化的部分形成路由参数
在对应的组件中，通过$route.params这个对象点出来动态匹配到的参数

命名路由

首先给路由规则加一个name属性，命名路由可以帮我们实现路由跳转
给to属性动态绑定一个对象，加：

编程式导航

声明式导航通过标签跳转
编程式导航通过javaScript的API实现跳转

调用push("哈希地址")方法可以跳转到指定的页面
调用go(-1)方法可以后退到之前的页面

案例

1. 先导入vue、vue-router
2. 创建App根组件
3. 创建路由实例对象
4. 把路由实例对象挂载到vue实例身上
5. 在vue实例控制的区域添加路由占位符
   

重定向之后会展示子组件，但同时也会展示父组件
点击详情的时候列表页没了取而代之是详情页，因此，详情页和列表页的路由规则在同一级