深入浅出篇 — vue-router

星空蓝
2,462 阅读2分钟

vue-router的简介

  • 路由，可简单理解为，当访问某个地址时，渲染某个组件
  • 记得要引入vue-router.js文件

一. 初始篇：

路由的使用

  • 根据一个配置对象创建路由，得到路由对象
  • 在创建vue实例时，将路由对对象配置到实例配置的router中
  • 在合适的位置写上router-view组件，表示路由匹配到的组件渲染的位置.它实际上是vue-router做好的一个组件，并且进行了全局注册
路由扩展 —— 动态路由：
  1. 方法一 ： params
  • 在配置路由规则时，可以将规则字符串书写为动态路由，动态路由使用冒号+单词( :id )
  • 当配置好路由后，除了向所有实例增加$router属性之外，还增加了一个属性 $route，该属性用于获取路由信息
  • $route.params 获取的是路由配置规则中匹配到的路由信息，通常称之为路由参数
  • this.$route.params.xxx 来拿到匹配的路由值
  1. 方法二：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("页面地址") ： 根据当前地址栈中的位置以及设置的偏移量，跳转页面

初识导航守卫:

  1. 全局守卫-beforeEach
  • 导航守卫是一些router的配置函数，不同的函数在不同的时机运行
  • 注册全局导守卫： beforeEach,传入的函数会在每次进行页面之前运行
  • 一旦注册了该守卫，除非在守卫中调用next函数，否则不会改变地址
例：
router.beforeEach(function(to,from,next){
    //参数to代表：要去哪个路径
    //参数from代表：从哪个路径来
    //当参数next执行时，意为可放行
    console.log("运行了")
})
  1. 组件内守卫
  • beforeRoutrLeave 当离开这个路径时执行
  • beforeRouteEnter 当进入这个路径时执行
  • beforeRouteUpdate 当这个组件所在的路径更新时执行 可配合 mounted
  1. 路由独享守卫
  • beforeEnter
  1. 进入到某一个路径时，执行顺序
  • beforeEach -> beforeEnter -> beforeRouteEnter -> beforeResolve -> afterEach
avatar
文章
阅读
粉丝