router从入门到入门

22 篇文章 0 订阅

动态路由匹配:

 // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }

/user/foo 和 /user/bar 都将映射到相同的路由。
所以他们的id分别表示foo,bar
对应的:
this.$route.params.id=foo;

this.$route.params.id=bar;

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。

监控路由的变化的方法:

1、可以在watch里监测变化

  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

2、加入导航守卫:beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }

匹配任意路径
就在path后面加一个*号;

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当使用一个通配符时,$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分:打印出来的就是代替*的部分

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

编程式导航:可以不用通过<router-link>来跳转;

1、 router.push:

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })    
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})    
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

push(规则),push括号里的规则同样可以写在to的属性;
其中,当push地址属性为name时候,不能传递query的参数;
params与query的区别:

  1. 在地址路径上,params会显示在后缀;
  2. query不会把参数显示在后缀;

2、router.replace

replace
类型: boolean
默认值: false
设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>

白话文就是:

<router-link :to="{ path: '/a'}" replace>a</router-link>
<router-link :to="{ path: '/b'}" replace>b</router-link>
<router-link :to="{ path: '/c'}" replace>c</router-link>

在这里插入图片描述
依次点击a,b,c页面以后,我从c页面点击浏览器的返回按钮,它不会回到b页面去;
反之使用push,它可以依次回到b,a页面去;

3、router.go

// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)

// 后退一步记录,等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)

命名视图

在这里插入图片描述
页面显示的时候,组件会放在对应的name来显示;

重定向和别名:

重定向:

 { path: '/a', redirect: '/b' }
  
 { path: '/a', redirect: { name: 'foo' }}

 { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  • “重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,
  • /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

别名:

  { path: '/a', component: A, alias: '/b' }

导航守卫:

类似路由的生命周期。

const router = new VueRouter({ ... })

next规则:一定要调用next()这个方法;

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

1、全局前置守卫:

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

2、全局后置守卫

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

在路由配置里添加

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫

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`
  }
}

其他API:

1、append

类型: boolean
默认值: false
设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
<router-link :to="{ path: 'b'}" append>newRoute</router-link>

白话文就是:
原来的路径是:/oldRoute,点击了newRoute以后,页面上的路径会变成/oldRoute/newRoute
反之,不加属性,默认跳转的路径是:/newRoute

2、tag

tag
类型: string
默认值: "a"
有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

白话文就是:
不管你tag设置为什么,在html页面上会被渲染成那个标签,并且你点击它,它还是能成功跳转到新的页面;
反之,不设置,就是默认的a标签;

3、active-class

active-class
类型: string
默认值: "router-link-active" 
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

白话文就是:

<router-link :to="'/index'" tag="li" active-class="be-red">首页</router-link>
<router-link :to="'/setting'" tag="li" active-class="be-red">设置</router-link>

//样式
.be-red{
    color: red;
}

点击设置会跳转到/setting路径,文字变红;
在这里插入图片描述
点击首页时候,会跳转到/index路径,并且首页文字会变红
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值