vue-router的简介
- 路由，可简单理解为，当访问某个地址时，渲染某个组件
- 记得要引入vue-router.js文件
一. 初始篇：
路由的使用
- 根据一个配置对象创建路由，得到路由对象
- 在创建vue实例时，将路由对对象配置到实例配置的router中
- 在合适的位置写上router-view组件，表示路由匹配到的组件渲染的位置.它实际上是vue-router做好的一个组件，并且进行了全局注册
路由扩展 —— 动态路由：
- 方法一 ： params
- 在配置路由规则时，可以将规则字符串书写为动态路由，动态路由使用冒号+单词( :id )
- 当配置好路由后，除了向所有实例增加
$router属性之外，还增加了一个属性 $route，该属性用于获取路由信息
$route.params 获取的是路由配置规则中匹配到的路由信息，通常称之为路由参数this.$route.params.xxx 来拿到匹配的路由值
- 方法二：query
- 除了使用params传递信息给页面，还可以使用query的方式，query的方式是在地址栏后面加上 ？ 依次书写路径
this.$route.query.xxx 来拿到匹配的路由值
路由的配置对象
- routes:路由规则配置
- mode：模式配置
- hash模式，兼容性最好，地址出现在#号，切换地址不会导致页面刷新
- history模式， 使用的是html5 history API ，地址直接变化，并且页面不刷新
导航
- 通常使用 router-link 来切换页面，它可以自动使用配置中的模式，并且不会刷新页面，本质上就是生成a元素
- router-link 会自动给a元素添加样式，当前的地址如果匹配router-link中的to的地址，则会添加样式
路由实践
<div id="app">
<router-link to="/">主页</router-link>
<router-link to="/news">新闻</router-link>
<!-- 上面那个link需要下面这个view来显现 需要router view来做配合 -->
<router-view></router-view>
</div>
<script>
// 第一步 定义组件
var home = {
template: '<h1>我是主页</h1>'
}
var news = {
template: '<h1>我是新闻页</h1>'
}
//第二步 配置路由 : 把url 对应的组件写出来
var routes = [ // 下面说的那个参数，要和这里一样
{path: "/",component: home}, // path ：指定的url， component ：对应组件名称
{path: "/news",component: news},
{path: "*",redirect: "/news"} //设置默认的主页 ， 没有他的话会默认没有内容
];
//第三步 实例化一个vuerouter对象
var router = new VueRouter({ //这个变量router名称是可变的
//前面的名字不可变，后面的可变，和配置路由中的参数一样的名字
routes: routes, //若这里前后两个名称一样的话可简写成一个
mode: 'history' //这样页面的路径上就没有#号了，默认是hash，浏览器的路径上会有井号
})
var vm = new Vue({
el: '#app', // 第四步 把路由对象挂载到vue对象上面
router //这里同理， 一样的话可以写一个 第一个参数名称不可变，变量名称可变，但要和上面一样
})
</script>
复制代码
二. 深入篇：
编程式导航：
- 当创建vue实例时，如果配置了router，会出现在所有的vue实例和组件实例中，方式作为
$router属性出现
$router.push("页面地址")：可以跳转页面（向当前页面地址栈中加入一个地址）$router.replace("页面地址")： 跳转页面（替换当前页面地址栈中当前位置的页面）$router.go("页面地址") ： 根据当前地址栈中的位置以及设置的偏移量，跳转页面
初识导航守卫:
- 全局守卫-beforeEach
- 导航守卫是一些router的配置函数，不同的函数在不同的时机运行
- 注册全局导守卫： beforeEach,传入的函数会在每次进行页面之前运行
- 一旦注册了该守卫，除非在守卫中调用next函数，否则不会改变地址
例：
router.beforeEach(function(to,from,next){
//参数to代表：要去哪个路径
//参数from代表：从哪个路径来
//当参数next执行时，意为可放行
console.log("运行了")
})
复制代码
- 组件内守卫
- beforeRoutrLeave 当离开这个路径时执行
- beforeRouteEnter 当进入这个路径时执行
- beforeRouteUpdate 当这个组件所在的路径更新时执行 可配合 mounted
- 路由独享守卫
- 进入到某一个路径时，执行顺序
- beforeEach -> beforeEnter -> beforeRouteEnter -> beforeResolve -> afterEach
