Vue-router浅识

Posted 2021-02-09 sminocence

一、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‘ }
  ]
})