VueRouter的基本使用

VueRouter是Vue.js官方支持的路由管理库,它可以帮助我们轻松地实现SPA单页应用。本文将详细介绍VueRouter的用法,包括相关api和方法、属性。

基本用法

安装和引入

首先,我们需要在项目中安装VueRouter,可以使用npm或yarn进行安装:

npm install vue-router

yarn add vue-router

安装完成后,我们需要在Vue项目中引入VueRouter并使用它:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    // 配置路由映射关系
  ]
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

初始化VueRouter实例

在创建VueRouter实例时,我们需要传入一个routes数组,用于配置路由映射关系。
routes数组中的每一项都是一个路由配置对象,包含以下属性:

  • path:路由路径,可以是一个字符串或者一个正则表达式
  • name:路由名称
  • component:路由对应的组件
  • redirect:重定向路由
  • alias:别名路由
  • meta:元信息,可以在路由切换时使用 下面是一个简单的例子:
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

在Vue组件中,我们可以使用<router-link>组件来创建链接,使用<router-view>组件来显示对应的组件。例如:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

这里的to属性可以是一个字符串,也可以是一个路由配置对象。

相关api和方法、属性

方法

router.beforeEach

这个方法会在每次路由跳转前执行,可以用来做一些权限控制或者全局路由守卫。

router.beforeEach((to, from, next) => {
  // to:即将跳转的路由对象
  // from:当前所在的路由对象
  // next:必须调用该方法才能跳转到下一个路由
  // 如果不调用该方法,则不会跳转
  next()
})

下面是一个简单的例子:

router.beforeEach((to, from, next) => { const isAuthenticated = localStorage.getItem('token') if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() })

在这个例子中,我们判断用户是否已经登录,如果没有登录且不是前往登录页面,则强制跳转到登录页面。

router.afterEach

这个方法会在每次路由跳转后执行,可以用来做一些页面切换后的处理,例如页面滚动到顶部等。

router.afterEach((to, from) => {
  // to:即将跳转的路由对象
  // from:当前所在的路由对象
  window.scrollTo(0, 0)
})

在这个例子中,我们在页面跳转后将页面滚动到顶部。

router.push

这个方法用来跳转到一个新的路由,可以是一个字符串或者一个路由配置对象。

router.push('/')

在这个例子中,我们跳转到根路由。

router.replace

这个方法用来替换当前路由,可以是一个字符串或者一个路由配置对象。

router.replace('/')

在这个例子中,我们替换当前路由为根路由。

router.go

这个方法用来在路由历史记录中前进或后退若干步。

router.go(-1)

在这个例子中,我们后退一步。

router.back

这个方法用来后退一步,等同于router.go(-1)

router.back()

在这个例子中,我们后退一步。

router.forward

这个方法用来前进一步,等同于router.go(1)

router.forward()

在这个例子中,我们前进一步。

router.currentRoute

这个属性会返回当前的路由对象,包含以下属性:

  • path:路由路径
  • name:路由名称
  • hash:URL中的哈希值
  • query:URL中的查询参数
  • params:路由路径中的参数
  • fullPath:完整的URL路径
  • matched:当前路由的匹配记录,包含一个或多个路由记录对象

下面是一个例子:

console.log(router.currentRoute)
// 输出:{path: "/", name: "Home", hash: "", query: {}, params: {}, fullPath: "/"}

属性

好的,下面是Vue Router的全部属性介绍及相关代码和注释:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
  mode: 'history', // 设置路由模式为history,会将URL中的#去掉
  base: process.env.BASE_URL, // 指定应用的基路径,可以在不同的域名下使用相同的路由配置
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about/:id?',
      name: 'About',
      component: About,
      props: true // 将路由参数作为组件的props传递给组件
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/components/Login.vue') // 使用懒加载,只有访问该路由时才会加载该组件
    },
    {
      path: '/404',
      name: 'NotFound',
      component: () => import('@/components/NotFound.vue')
    },
    {
      path: '*', // 当访问其它不存在的路由时,重定向到'/404'
      redirect: '/404'
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    // 当切换路由时,返回页面顶部
    return { x: 0, y: 0 }
  }
})

注释:
1. 在Vue组件中导入Vue Router,并在Vue实例中使用它。
2. 创建一个新的Vue Router,包含多个路由对象。
3. mode属性用于指定路由模式,有两个可选值,‘hash’和’history’,默认为’hash’。‘hash’模式会在URL中添加一个#,而’history’模式会将URL中的#去掉。
4. base属性用于指定应用的基路径,可以在不同的域名下使用相同的路由配置。
5. routes属性用于定义多个路由对象。
6. 路由对象中的path属性用于指定路由路径。
7. 路由对象中的name属性用于指定路由名称。
8. 路由对象中的component属性用于指定路由对应的组件。
9. 路由对象中的props属性用于指定将路由参数作为组件的props传递给组件。
10. 使用懒加载可以提高应用的性能,只有访问该路由时才会加载该组件。
11. 当访问其它不存在的路由时,重定向到’/404’。
12. scrollBehavior属性用于指定路由切换时页面如何滚动。在该函数中,可以指定返回的位置。

一些常见的用法

路由懒加载

在应用程序较大时,我们需要考虑性能问题。一种优化方式是将应用程序拆分为多个小块,并在需要时动态加载这些块,这就是所谓的懒加载。在Vue Router中,使用懒加载非常简单,只需要将组件作为函数返回即可。

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "bar" */ './Bar.vue')
const routes = [
  {
    path: '/foo',
    name: 'Foo',
    component: Foo
  },
  {
    path: '/bar',
    name: 'Bar',
    component: Bar
  }
]

在这个例子中,我们使用了import()函数来动态加载组件。注意,import()函数返回一个Promise对象,因此我们可以使用then()方法来处理组件加载完成后的逻辑。

路由元信息

路由元信息是指在路由配置中定义的一些额外信息,例如页面标题、页面描述、页面关键字等。这些信息可以在路由切换时使用。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      description: '这是首页',
      keywords: '首页,Vue,路由'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于我们',
      description: '这是关于我们',
      keywords: '关于我们,Vue,路由'
    }
  }
]

在这个例子中,我们在路由配置中定义了三个元信息:titledescriptionkeywords。我们可以在路由切换时使用这些信息来动态修改页面的标题、描述和关键字。

router.beforeEach((to, from, next) => {
  const meta = to.meta
  if (meta.title) {
    document.title = meta.title
  }
  if (meta.description) {
    const description = document.querySelector('meta[name="description"]')
    description.setAttribute('content', meta.description)
  }
  if (meta.keywords) {
    const keywords = document.querySelector('meta[name="keywords"]')
    keywords.setAttribute('content', meta.keywords)
  }
  next()
})

在这个例子中,我们在beforeEach()方法中获取当前路由的元信息,并根据元信息动态修改页面的标题、描述和关键字。

路由嵌套

路由嵌套是指在一个路由中嵌套另一个路由。在Vue Router中,我们可以通过配置子路由来实现路由嵌套。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'about',
        name: 'About',
        component: About
      },
      {
        path: 'contact',
        name: 'Contact',
        component: Contact
      }
    ]
  }
]

在这个例子中,我们在根路由中嵌套了两个子路由:/about/contact。在组件中,我们可以使用<router-view>组件来显示子路由对应的组件。例如:

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

在这个例子中,我们在Home组件中使用<router-view>组件来显示子路由对应的组件。

命名路由

命名路由是指在路由配置中为路由命名,以便在代码中使用。在Vue Router中,我们可以通过给每个路由配置一个name属性来实现命名路由。

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

在这个例子中,我们为两个路由分别命名为HomeAbout。在代码中,我们可以使用这些名称来跳转到对应的路由。

router.push({ name: 'Home' })

在这个例子中,我们通过名称跳转到Home路由。

动态路由

动态路由是指在路由路径中使用参数来匹配多个路由。在Vue Router中,我们可以在路由配置中使用冒号:来定义动态参数。

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

在这个例子中,我们定义了一个动态路由/user/:id,其中:id是动态参数。在组件中,我们可以通过$route.params.id来获取动态参数的值。

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

在这个例子中,我们定义了一个动态路由/user/:id,其中:id是动态参数。在组件中,我们可以通过$route.params.id来获取动态参数的值。

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

在这个例子中,我们在User组件中显示了动态参数的值。

带参数的路由导航

在路由路径中使用参数后,我们可以通过$route.params来获取参数的值。在代码中,我们可以使用params属性来传递参数。

router.push({ name: 'User', params: { id: 123 } })

在这个例子中,我们通过params属性将参数id的值设置为123,然后跳转到User路由。

重定向和别名路由

重定向是指将一个路由重定向到另一个路由,可以是一个字符串或者一个路由配置对象。在Vue Router中,我们可以在路由配置中使用redirect属性来定义重定向路由。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      // 设置别名为info
      alias: '/info',
      name: 'About',
      component: About
    },
    {
      path: '/old-about',
      // 重定向到/about
      redirect: '/about'
    }
  ]
})

注释:
1. 在Vue组件中导入Vue Router,并在Vue实例中使用它。
2. 创建一个新的Vue Router,包含多个路由对象。
3. 第一个路由对象是根路径’/‘,指向Home组件。
4. 第二个路由对象是路径为’/about’,指向About组件,并设置了别名为’/info’。当访问’/info’时,会重定向到’/about’。
5. 第三个路由对象是路径为’/old-about’,会将访问该路径的请求重定向到’/about’。

Logo

前往低代码交流专区

更多推荐