Vue Router

Vue Router

任何组件内通过 this.$router 访问路由器，可以通过 this.$route 访问当前路由

回退

goBack() {
  window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}

动态路由匹配

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
    { path: '/user/:username/post/:post_id', component: User }
  ]
})

// 接受参数
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
this.$route.params.id

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

watch: {
  $route(to, from) {
    // 对路由变化作出响应...
  }
  // 导航守卫
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

捕获所有路由

{
  // 会匹配所有路径
  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'

路由嵌套

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

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

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

编程式的导航

声明式	编程式
router-link :to=”…”	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' }})
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

后退或前进

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

命名路由

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

命名视图

<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

重定向和别名

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

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由组件传参

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

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

  // 通过 props 解耦

  const User = {
    props: ['id'],
    template: '<div>User {{ id }}</div>'
  }
  const router = new VueRouter({
    routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

Vue Router 传参

params 传值

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User, name:'user',}
  ]
})

// 传值
this.$router.push({
  name:"'user'",//这个name就是你刚刚配置在router里边的name
  params:{
    userId:"10011"
  }
})

// 取值
this.$route.params.userId

query 传值

<template>
  <router-link
    :to="{ path: '/log', query: { name1: 'haha', name2: 'enen' } }"
  >
  </router-link>
</tempalte>

//  传值
this.$router.push({
  path:"/user",//这个path就是你在router/index.js里边配置的路径
  query:{
    userId:"10011"
  }
})

// 取值
this.$router.currentRoute.query.userId
this.$route.query.userId

基础路径

//  base 基础路径
const router = new VueRouter({
  mode: 'history', // 只有 history 模式下 base 才起作用
  base: '/app', // 基础路径 默认为 /
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
    { path: '/user/:username/post/:post_id', component: User }
  ]
})

hase 模式下 base 不起作用，可以用路由嵌套的方式加上前缀

---

相关资料

vue Router
vue $router 路由传参的4种方法详解√
vue router跳转方法√
vite —— 一种尤雨溪开发的新的、更快地 web 开发工具
vite