Vue学习之VueRouter的基本用法(多而全)

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，路由'
    }
  }
]

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

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

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

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’。