美文网首页
vue-router

vue-router

作者: 浮生弱梦 | 来源:发表于2020-12-18 20:48 被阅读0次

    一:router,routes,route
    1, router:一般指的就是路由实例.如router. //this.router.push
    2, routes:指router路由实例的routes API.用来配置多个route路由对象.
    3, route:指的就是路由对象.例如;$route指的就是当前路由对象.

    二、
        vue-router的两种模式
        一般单页面应用是(SPA)不会请求页面而是只更新视图. vue-router提供了两种方式来实现前端路由:Hash模式和History模式,可以用mode参数来决定使用哪一种方式.
        1,Hash模式
        vue-router默认使用Hash模式.使用url的hash来模拟一个完整的url.此时url变化时,浏览器是不会重新加载的.Hash(即#)是url的锚点,代表的是网页中的一个位置,仅仅改变#后面部分,浏览器只会滚动对应的位置,而不会重新加载页面.#仅仅只是对浏览器进行指导,而对服务端是完全没有作用的!它不会被包括在http请求中,故也不会重新加载页面.同时hash发生变化时,url都会被浏览器记录下来,这样你就可以使用浏览器的后退了.
        总而言之:Hash模式就是通过改变#后面的值,实现浏览器渲染指定的组件.
        2,History模式
        如果你不喜欢hash这种#样式.可以使用history模式.这种模式利用了HTML5 History新增的pushState()和replaceState()方法. 除了之前的back,forward,go方法,这两个新方法可以应用在浏览器历史记录的增加替换功能上.使用History模式,通过历史记录修改url,但它不会立即向后端发送请求.
        注意点: 虽然History模式可以丢掉不美观的#,也可以正常的前进后退,但是刷新f5后,此时浏览器就会访问服务器,在没有后台支持的情况下,此时就会得到一个404!官方文档给出的描述是:"不过这种模式要玩好,还需要后台配置支持.因为我们的应用是单个客户端应用,如果后台没有正确的配置,当用户直接访问时,就会返回404.所以呢,你要在服务端增加一个覆盖所有情况的的候选资源;如果url匹配不到任何静态资源,则应该返回同一个index.html页面.
        
    const router = new VueRouter({
      mode: 'history', //如果这里不写,路由默认为hash模式
      routes: [...]
    })
    
    三、路由对象属性介绍:
    为了下面理解的方便这里简单介绍下常用的路由对象属性,在组件内可以通过this.$route(不是$router!)进行访问.
    $route.path
    类型: string
    字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
    $route.params
    类型: Object
    一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
    $route.query
    类型: Object
    一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。
    $route.name
    当前路由的名称,如果有的话。这里建议最好给每个路由对象命名,方便以后编程式导航.不过记住name必须唯一!
    $route.hash
    类型: string
    当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
    $route.fullPath
    类型: string
    完成解析后的 URL,包含查询参数和 hash 的完整路径。
    $route.matched
    类型: Array<RouteRecord>
    一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。  
    $route.redirectedFrom
    如果存在重定向,即为重定向来源的路由的名字。
    

    相关文章

      网友评论

          本文标题:vue-router

          本文链接:https://www.haomeiwen.com/subject/sowuwktx.html