vue.js中Vue-router 2.0基础实践教程

下面是“vue.js中Vue-router 2.0基础实践教程”的完整攻略：

什么是Vue-router？

Vue-router是Vue.js官方的路由管理器。它与Vue.js深度集成，可以非常方便地实现单页应用中的路由跳转、参数传递、路由拦截等功能。Vue-router的核心概念包括路由、参数、钩子、子路由等。

安装和使用Vue-router

安装Vue-router非常简单，可以使用npm或者直接引入CDN资源。以下是使用npm安装Vue-router的步骤：

1. 在项目目录下运行命令：npm install vue-router --save
2. 在main.js文件中引入Vue-router并安装：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

1. 创建路由配置，并将其传给VueRouter实例：

import Home from './views/Home.vue'
import About from './views/About.vue'

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

在上述代码中，我们定义了两个路由，分别对应'/'和'/about'路径。当访问这两个路径时，会分别展示Home和About组件。另外，我们还通过Vue.use()方法安装了VueRouter插件，并将VueRouter实例挂载在Vue根实例上。这样就完成了Vue-router的基本配置。

Vue-router的核心概念

路由

路由是指页面的路径，可以用字符串、正则表达式或者对象表示。在Vue-router中，路由可以通过path、name、props等参数进行精确匹配。如：

const routes = [
  { path: '/user/:id', component: User },
  { path: '/about', name: 'about', component: About },
  { path: '/home', component: Home, props: {message: 'hello world'} }
]

在上述代码中，路由'/user/:id'表示/user路径下的所有子路径都会匹配到User组件。而'/about'路径只有在name为'about'的组件被点击时才会跳转到About组件，这种方式比较适合处理复杂的路径匹配。'props'属性则可以传递静态参数给组件。

参数

Vue-router中的参数主要有路由参数和查询参数两种。其中路由参数是动态的，对应路由定义中的占位符（如上例中的':id'），而查询参数则是静态的，以'?'开头（如'/?page=2'）。

路由参数可以通过$route.params访问，查询参数可以通过$route.query访问。如：

// 路由/path/to/user/123
console.log($route.params.id) // 123

// 路由/path/to/user?id=123
console.log($route.query.id) // 123

钩子

钩子（或生命周期）是Vue-router提供的一种机制，用于在路由的不同阶段执行代码。Vue-router提供了三种钩子：全局钩子、路由级别钩子和组件级别钩子。

全局钩子包括beforeEach、afterEach和beforeResolve，可以在整个路由生命周期中执行。路由级别钩子包括beforeEnter、beforeRouteUpdate和beforeRouteLeave，可以以路由为单位执行。组件级别钩子包括beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave，可以在组件内部执行。

以上是Vue-router的核心概念。接下来，我们通过两个示例说明Vue-router的用法。

示例1：动态路由匹配和参数传递

动态路由匹配是Vue-router的一项非常重要的功能，可以根据不同的路由动态渲染不同的组件。以下是一个基本的动态路由匹配的示例：

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

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

在这个例子中，我们定义了一个路由'/user/:id'，可以匹配以/user/开头的任何路径（比如/user/123）。匹配成功后，Vue-router会将路由参数作为props传递给对应的组件（也可以使用$route.params访问）。

示例2：嵌套路由和路由拦截

嵌套路由是指在一个路由下再包含子路由，比如一个博客文章页面下嵌套着评论列表、评论发表等子路由。以下是一个嵌套路由的示例：

const blog = {
  template: `<div>
      <h1>Blog</h1>
      <router-view></router-view>
    </div>`
}

const post = {
  template: `<div>
      <h2>Post</h2>
    </div>`
}

const comment = {
  template: `<div>
      <h2>Comment</h2>
    </div>`
}

const router = new VueRouter({
  routes: [
    {
      path: '/blog',
      component: blog,
      children: [
        { path: 'post', component: post },
        { path: 'comment', component: comment }
      ]
    }
  ]
})

在这个例子中，我们定义了一个父路由'/blog'，它包含两个子路由'post'和'comment'。当访问父路由'/blog'时，Vue-router会渲染对应的blog组件，并在标签中呈现子路由的内容。

路由拦截是Vue-router的另一个重要功能，可以在路由跳转之前或之后执行某些代码。以下是一个路由拦截的示例：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // to和from是路由对象，next是一个函数
  if (to.path === '/login') {
    next()
  } else {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})

在这个例子中，我们使用beforeEach全局钩子实现了登录验证。当用户要进入非登录页面时，如果没有token，则强制跳转至登录页面。如果有token，则正常进入页面。