Vue-router浅识

Posted sminocence

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-router浅识相关的知识,希望对你有一定的参考价值。

一、router-link及router-view

const router = new VueRouter({
    routes //相当于routes: routes
})

// 将router配置注入路由从而让整个应用具有路由功能
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

我们可以通过this.$router来访问路由器,然后通过this.$route来访问当前路由。

二、动态路由标记

1.作用

动态路由标记的多个不同的路由映射到同一个组件。路由中需要夹杂路由参数,例如/user/:id,冒号是路由参数的标志。当匹配到一个路径的时候,参数值会被设置到this.$route.params,可以在每个组件内使用。

2.响应路由参数的变化

当使用路由参数,即动态路由的时候,因为这时候不同的路由映射的是同一个组件,那么这个组件将会被复用,而不是销毁后再创建,这也意味着组件的生命周期钩子将不会被调用
但是某些时候,我们复用组件的时候,可能想对路由参数的变化做出响应,可以简单地监测(watch)$route对象或者使用2.2版本中引入的beforeRouteUpdate导航守卫。导航守卫类似method属性,直接在对象中当做属性加入。当然路径中也可以使用通配符,路由中使用了,那么$route.params内部会自动添加一个参数pathMatch,它包含了URL通过通配符被匹配的部分。

三、嵌套路由

实际项目中的页面,通常是通过多个嵌套的组件组成。所以顶层组件就渲染最高级出口,当然某个组件内也拥有自己的

<div id="app">
  <router-view></router-view>
</div>

// User组件
const User = {
  template: ‘<div>User {{ $route.params.id }}</div>‘
}

// router
const router = new VueRouter({
  routes: [
    { path: ‘/user/:id‘, component: User }
  ]
})

// User组件内部加入<router-view></router-view>
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

// 想在嵌套的出口中渲染组件,需要在VueRouter的参数中配置children

const router = new VueRouter({
  routes: [
    { path: ‘/user/:id‘, component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功,
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: ‘profil9e‘,
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: ‘posts‘,
          component: UserPosts
        }
      ]
    }
  ]
})

// 当只访问"/user/foo"时,没有匹配任何路由,所以User内部的<router-view></router-view>不会渲染什么,所以这时候需要创建一个空路径,并映射到一个组件。
{
    path:" ",
    component: UserHome
}

四、编程式的导航

除了使用

  • router.push(location,?onComplete,?onAbort)
  • router.replace(location,?onComplete,?onAbort)
  • router.go(n)

    1.router.push

    使用router.push方法,会向history栈中添加一个新的记录。当用户点击浏览器的前进后退按钮时,会导航到相应的url。
    当你点击中的a标签时,相当于执行router.push方法。

    1.1此方法的参数:location,onComplete,onAbort

  • location:这个参数可以直接使用字符串路径或者一个描述地址的对象
router.push(‘home‘)

router.push({path:‘home‘})

router.push({name:‘user‘, params: {userId: ‘123‘}})

router.push({path:‘register‘, query: {id: ‘34‘}}) //带查询参数,变为"/register?id=34"

注意:如果提供了path,那么params会被忽略,上述例子query不属于这种情况。如果想提供参数params,那么可以使用name,不能使用path,因为params在path存在情况下都会失效。如果要使用path,还想加入参数,那么必须手写完整的带参数的path。

const userId = ‘123‘
router.push({ name: ‘user‘, params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: ‘/user‘, params: { userId }}) // -> /user

同样的规则同样适用于router-link的to属性。

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

2.router.replace(location,?onComplete,?onAbort)

跟router.push功能类似,唯一的区别是它不会向history栈中添加一个记录,而是去替换history栈中的当前记录。

3.router.go(n)

n是一个整数,n为正整数时,表示向前跳转n步,相反向后跳转n步,超出history栈中的记录时,跳转失效。

五、命名路由

即对VueRouter配置中的routes中的某个路由对象添加name属性,使其成为带有名字的路由。
当你需要链接到一个路由,则需要对中的to赋值一个对象。

const router = new VueRouter({
  routes: [
    {
      path: ‘/user/:userId‘,
      name: ‘user‘,
      component: User
    }
  ]
})
<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>

上述代码和router.push({ name: ‘user‘, params: { userId: 123 }})作用类似。

六、命名视图

有时候想同级展示多个视图,而不是嵌套展示。一个路由下想展示多个视图,则需要多个组件。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: ‘/‘,
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

七、重定向和别名

const router = new VueRouter({
  routes: [
    { path: ‘/a‘, redirect: ‘/b‘ }
  ]
})



以上是关于Vue-router浅识的主要内容,如果未能解决你的问题,请参考以下文章

卷积算法归纳总结(浅识)

虚拟技术浅识

项目集成 vue-router 和 vuex

浅识XPath(熟练掌握XPath的语法)python爬虫入门进阶(03)

vue-router 2.0 常用基础知识点之router-link

百行代码带你入门 vue-router!