vue-router 学习笔记

最新推荐文章于 2024-04-11 20:34:10 发布

sunshine_hz

最新推荐文章于 2024-04-11 20:34:10 发布

阅读量279

点赞数

分类专栏： vue 学习笔记

学习笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

安装

npm install vue-router --save

起步

Javascript:

import vue from 'vue';
import vueRouter from 'vue-router';
vue.use(vueRouter);

var routes=new vueRouter({
    routes:[
        {
            path:'/aaa',
            name:'bbb',
            component:xxxx
        },
        {
            path:'/aaa/:id/:name',
            name:'bbb',
            component:xxxx
        },
        {
            path:'/aaa/:id/:name',
            name:'bbb',
            component:xxxx,
            children:[
                path:'post',
                component:xxx,
                props:bool/{}/route=>{} //布尔模式，对象模式，函数模式
            ]
        },
    ]
})

HTML

<router-link to='/path'><router-link>
<router-link to='{name:'path',params:{},query:{}}'>

动态匹配路由

#配置方法

new vueRouter({
    routes:[    
        // 动态路径参数使用 ：标记。
        {path:'/user/:id',name:'user',component:user}
    ]
})

一个参数路径用：冒号标记。当匹配到一个路由时，参数会被设置到this.$route.params中。

#响应路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar 时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比如销毁再创建，复用显得更有效率。不过，这也意味着组件的生命周期钩子不会再被调用。

这个时候想对路由参数的变化做出相应，可以简单地使用watch(检测变化) $route 对象或者使用 beforeRouteUpdate()导航守卫

//watch
const user={
    template:``,
    watch:{
        $route(to,from)=>{
            ...
        }
    }
}

//beforeRouterUpdate()
const user={
    template:``,
    beforeRouteUpdate(to,from,next){
        
    }
}

#高级匹配模式

https://github.com/pillarjs/path-to-regexp#parameters

#匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由

new vueRouter({
    routes:[
        {
            path:'/user',
            name:'user',
            component:user,
            children:[
                {
                    path:'foo', //要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
                    component:foo,
                    props:bool/Object/(route)=>{}
                },
                 //此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。
                 //如果你想要渲染点什么，可以提供一个 空的 子路由：
                {
                    path:'',
                    component:bar 
                }
            ]
        }
    ]
})

const user={
    template:`
        <div>
            <router-view></router-view>
        </div>
    `
}

编程式导航

# this.$router.push(location,onComplete?,onAbort?)

this.$router.push('home')
this.$router.push({name:'home',param:{},query:{}})
this.$router.push({path:'/home',query:{}})

注意：如果提供了 path，params 会被忽略.同样的规则也适用于 router-link 组件的 to 属性。

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

# this.$router.replace(location,onComplete?,onAbort?)

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

# this.$router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步

命名视图

new vueRouter({
    routes:[
        {
            path:'/user',
            name:'user',
            components:{
                default:foo,
                helper:bar
            }
        }
    ]
})

<div>
    <router-view></router-view> //没有名字 默认default
    <router-view name='helper'></router-view>
</div>

重定向

new vueRouter({
    routes:[
        {path:'/user/:id',name:'user',component:user,redirect:'/foo'}
      //{path:'/user/:id',name:'user',component:user,redirect:{name:'foo'}}
      //{path:'/user/:id',name:'user',component:user,redirect:to=>{
           const {query,params}=to;
           return {name:'foo',query,params}
        }}
    ]
})

注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。

别名

new vueRouter({
    routes:[
        {path:'/user',name:'user',component:user,alias:'/foo'},
        {path:'/foo',name:'foo',component:foo},
    ]
})

alias的值可以为字符串，当有多个别名时，可以用数组

别名的意思是比如上例，/user的别名是 /foo，当用户访问 /foo 时，url会保持 /foo，但是路由匹配则为/user，就像用户访问 /user一样

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦。

#布尔模式

props属性设置为(全等于) true的时候，route.params 将会被设置为组件属性。

new vueRouter({
    routes:[
        {path:'/user/:id',name:'user',component:user,props:true}
    ]
})

#对象模式

new vueRouter({
    routes:[
        {path:'/user/:id',name:'user',component:user,props:[a:1,b:2]}
    ]
})

#函数模式

new vueRouter({
    routes:[
        {path:'/user/:id',name:'user',component:user,props:route=>{
            return {a:1,b:2,id:route.params.id}
        }}
    ]
})

导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

注意：参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

#全局守卫 beforeEach

/**
*@description:
*@param route to 即将要进入的目标路由对象
*@param route from 导航正要离开的路由
*@param next() 进行管道中的下一个钩子。 
*@param next(false):中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，
*那么 URL 地址会重置到 from 路由对应的地址。
*@param next('/')、next({path:'/'}):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导
*航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任
*何用在 router-link 的 to prop 或 router.push 中的选项。
*@param next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被
*传递给 router.onError() 注册过的回调。
/


router.beforeEach((to,from,next)=>{
    next();
})

#全局解析守卫 beforeResolve

router.beforeResolve((to,from,next)=>{
    next()
})

你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

#全局后置钩子 afterEach

这个钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to,from)=>{
    
})

#路由独享的守卫 beforeEnter

new vueRouter({
    routes:[
        {
            path:'/user',
            name:'user',
            component:user,
            beforeEnter(to,from,next){
                
            }
        }
    ]
})

#组件内的守卫

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter不能访问组件实例this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。但是可以传一个回调给next来访问组件。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。

#完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

过渡动效

数据获取

滚动行为

路由懒加载

sunshine_hz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router 学习笔记

安装npm install vue-router --save起步Javascript: import vue from 'vue';import vueRouter from 'vue-router';vue.use(vueRouter);var routes=new vueRouter({ routes:[ { pat...
复制链接

扫一扫