• vue-router api学习

    参数介绍：

    base：类型string

                默认值：'/'

                具体的用途：应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

    举个实际应用的例子：

    const router = new VueRouter({
  mode: 'history',
  base:'/vue-spa-template-master/dist/',
  routes: routes
});

    这个主要是在实际的开发中一个项目文件下，例如针对php，

    该文件中的文件夹个大PHP专属文件夹，有前端专属的文件夹。所以生产的目录还有再多一层这时候base就起到的大作用

    需求：想要转到：http://localhost/vue-spa-template-master/dist/hello

    http://localhost/vue-spa-template-master/index.html

    <head>
  <meta http-equiv="refresh" content="0,url=./dist">
</head>

    作用是用根目录转到dist的index目录

     

    linkActiveClass

    • 类型: string

    • 默认值: "router-link-active"

    • 全局配置 <router-link> 的默认『激活 class 类名』

    const router = new VueRouter({
  mode: 'history',
  base:'/vue-spa-template-master/dist/',
  routes: routes,
  linkActiveClass: 'active'
});

    如果html存在

    <router-link to="/hello">/hello</router-link>

    当跳转到这个路由时,浏览器的html

    <a href="/vue-spa-template-master/dist/hello" class="router-link-exact-active active">/hello</a>

    scrollBehavior

    注意: 这个功能只在 HTML5 history 模式下可用。

    类型: Function

    签名:

    (
  to: Route,
  from: Route,
  savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}
    const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

    scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

    这个方法返回滚动位置的对象信息，长这样：

    • { x: number, y: number }
    • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

    如果返回一个 falsy (译者注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。

    eg、

    scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

    对于所有路由导航，简单地让页面滚动到顶部。

    返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

    scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

    如果你要模拟『滚动到锚点』的行为：

    scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

    官方实例：

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
  template: `
    <div>
      bar
      <div style="height:500px"></div>
      <p id="anchor">Anchor</p>
    </div>
  `
}

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition
  } else {
    const position = {}
    // new navigation.
    // scroll to anchor by returning the selector
    if (to.hash) {
      position.selector = to.hash
    }
    // check if any matched route config has meta that requires scrolling to top
    if (to.matched.some(m => m.meta.scrollToTop)) {
      // cords will be used if no selector is provided,
      // or if the selector didn't match any element.
      position.x = 0
      position.y = 0
    }
    // if the returned position is falsy or an empty object,
    // will retain current scroll position.
    return position
  }
}

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  scrollBehavior,
  routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Scroll Behavior</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

    属性、

    router.app

    返回的vue实例，

    可以通过router.app调用函数，调用data中的值

     

    router.currentRoute：

    设置当前的路由

    eg、

    import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components
const Home = { template: '<div>home</div>' }// 3. Create the router
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Home },
  ]
})
new Vue({
  data:{a:111},
  router,
  template: `
    <div id="app">
      <h1>Basic</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')
console.log(router.app.a)  //1111
    console.log(router.currentRoute) //返回router对象
    {

    fullPath:"/"

    hash:"",

    matched:[{…}],

    meta:{},

    name:undefined,

    params:{},

    path:"/",

    query:{}

    }

     在Vue实例中使用 

    this.$router.currentRoute获取当前的地址

    router.push

    使用方法：

    （1）this.$router.push({name: 'playerDetail', params: {id: this.audio.id}})

    （2）this.$router.push({path:'/me'})

    

    router.replace(location)
    

    =====window.history.replaceState
    

    跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
    

     
    

    router.go(n)
    

    ====window.history.go
    

    

    // 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
 
// 后退一步记录，等同于 history.back()
router.go(-1)
 
// 前进 3 步记录
router.go(3)
 
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
　　
    

    


    路由信息对象的属性
    

      

    • 

      $route.path
      

        

      • 

        类型: string
        

        字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
        

        • 

      

      • 

    

      

    • 

      $route.params
      

        

      • 类型: Object
        • 

      

      一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。
      

      • 

    • 

      $route.query
      

        

      • 

        类型: Object
        

        一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
        

        • 

      

      • 

    

      

    • 

      $route.hash
      

        

      • 

        类型: string
        

        当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
        

        • 

      

      • 

    

      

    • 

      $route.fullPath
      

        

      • 

        类型: string
        

        完成解析后的 URL，包含查询参数和 hash 的完整路径。
        

        • 

      

      • 

    

      

    • 

      $route.matched
      

        

      • 类型: Array<RouteRecord>
        • 

      

      一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。
      

      const router = new VueRouter({
  routes: [
    // 下面的对象就是 route record
    { path: '/foo', component: Foo,
      children: [
        // 这也是个 route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})
      

      当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象（副本）。
      

      • 

    • 

      $route.name
      

      当前路由的名称，如果有的话。
      

      • 

    

    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              缓存
                
    判断空对象的方法
                
    Vue响应式系统如何操作运用？本文详解
                
    2020最新中级web前端面试题库（含详细答案，15k级别）你会几道呢？
                
    如何用JavaScriptJ封装拖动验证滑块？本文教你
                
    Nodejs中ES Modules如何操作运用？本文详解
                
    Vue学习总结之Vue的生命周期是怎么运用操作的？本文详解
                
    Vue项目如何部署？实战教你
                
    canvas绘制简单的霓虹灯效果
                
    canvas绘制五角星详细过程
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/heyinwangchuan/p/7834371.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知