Vue Router

获取URL查询参数

例如http://example.com/events?page=4

template

<h1>You are on page {{ $route.query.page }}</h1>

component

import { computed } from "vue";
import { useRoute } from 'vue-router'
const route = useRoute()

const page = computed(() => parseInt(route.query.page) || 1)

url当作参数

方式一

路由配置

const routes = [
  ...
  { path: '/events/:page', component: Events },
]

<h1>You are on page {{ $route.params.page }}</h1>

方式二把参数当作Props

const routes = [
  ...
  { path: '/events/:page', component: Events, props: true },
]

<script setup>

defineProps(['page'])

</script>
<template>
  <h1>You are on page {{ page }}</h1>
</template>

路由级参数配置

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    props: { showExtra: true },
  },

<template>
  <div class="home">
    <h1>This is a home page</h1>
    <div v-if="showExtra">Extra stuff</div>
  </div>
</template>
<script setup>

defineProps(['showExtra'])

</script>

路由传送查询参数

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    props: (route) => ({ showExtra: route.query.e }),
  },

props: route => {
  return { showExtra: route.query.e }
}

路由变动

重定向

    const router = new VueRouter({
      routes: [
        ...
        {
          path: '/about-us',
          name: 'About',
          component: About
        }
      ]
    })

    const router = new VueRouter({
      routes: [
        ...
        {
          path: '/about',
          redirect: { name: "About" }
        }
      ]
    })

别名

为了seo最好别用

    const router = new VueRouter({
      routes: [
        ...
        {
          path: '/about-us',
          name: 'About',
          component: About,
          alias: '/about' // <-----
        }
      ]
    })

复杂路由变动 /event/:id 到 /events/:id

...
const routes = [
  ...
  {
    path: '/events/:id', // <--- make plural 'events'
    name: 'EventLayout',
    ...
  },
  {
    path: '/event/:id',
    redirect: to => {
      return { name: 'EventDetails', params: { id: to.params.id } }
    }
  },

{
    path: '/event/:id',
    redirect: () => {
      return { name: 'EventDetails' }
    }
},

子路由

重定向

 {
    path: '/event/:id',
    redirect: () => {
      return { name: 'EventDetails' }
    },
    children: [
      { path: 'register', redirect: () => ({ name: 'EventRegister' }) },
      { path: 'edit', redirect: () => ({ name: 'EventEdit' }) }
    ]
  },

通配符方式

{
    path: '/event/:afterEvent(.*)',
    redirect: to => {
      return { path: '/events/' + to.params.afterEvent }
    }
  },

路由 Push 例子

// Directly to the path with a single string
router.push('/about')

// Directly to the path with an object
router.push({ path: '/about' })

// Directly to the named path
router.push({ name: 'About' })

// With a dynamic segment as I showed above
router.push({ name: 'EventDetails', params: { id: 3 } })

// With a query ... resulting in /?page=2 in our example app
router.push({ name: 'EventList', query: { page: 2 } })

// This will replace the current page I’m on with the EventDetails page, so the back button will no longer go back to the current page. The arguments are the same as router.push.
router.replace({ name: 'EventDetails', params: { id: 3 } })

// Go forward a record
router.go(1)

// Go backward a record
router.go(-1)

懒加载

{
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

另一种写法

const About = () => import(/* webpackChunkName: "about" */ '../views/About.vue')

const routes = [
...
{
path: '/about',
name: 'About',
component: About
}

路由之后回到页面最上方，或者返回页面的时候回到之前位置

...
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) { // <----
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})
...