vue路由插件之vue-route

下面是针对“vue路由插件之vue-router”的完整攻略：

概述

Vue-Router 是 Vue.js 的官方路由插件，它能够快速构建 SPA（Single-Page Application）应用程序或更改原有的应用程序的路由。Vue-Router是一个与Vue.js 联系最紧密的框架，它的核心思想，就是把路由映射到组件。这个映射是双向的，因此，当一个组件被渲染时，也会相应地将其路由匹配到的 URL 映射到该组件。

安装

在使用 Vue-Router 前，我们需要先安装它。可以通过npm方式安装：

npm install vue-router --save

基本用法

在 Vue.js 的官方文档中，示例应用是通过 CDN 的方式引入 Vue.js 和 Vue-Router，但是在实际项目中，我们很少使用 CDN 方式引入这些库。下面是一个简单的 Vue-Router 示例：

<!-- index.html -->
<div id="app">
  <router-view></router-view>
</div>

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>首页内容</div>' }
const About = { template: '<div>关于我们内容</div>' }

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

const router = new VueRouter({
  routes
})

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

在上面的示例中，我们首先在 index.html 文件中添加了一个 router-view 的标签，该标签将渲染我们导航到的组件。然后，在 main.js 文件中，我们分别定义了两个组件 Home 和 About，用于展示不同的页面内容。

接下来，我们通过定义 routes 数组来配置路由，routes 数组中包含我们的路径及对应的组件。

创建VueRouter实例时，传入配置对象，其中的routes数组为定义路由规则的数组。同时通过use方法注册插件，之后我们创建一个Vue对象并将VueRouter实例作为参数传入。

最后通过$mount方法将Vue对象挂载到 id 为 app 的元素上。这样，Vue-Router 就成功地集成到了 Vue.js 中。

嵌套路由

在实际应用中，页面可能非常复杂，甚至需要嵌套路由。下面是一个嵌套路由的示例：

// main.js
const User = {
  template: `
    <div>
      <h2>User</h2>
      <router-view></router-view><!-- 嵌套路由的渲染点 -->
    </div>
  `
}

const UserInfo = {
  template: `
    <div>
      <p>User的信息</p>
    </div>
  `
}

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

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

在这个示例中，我们首先定义了一个父路由 '/user'，这个路由包含一个 <router-view></router-view> 标签，用于渲染嵌套的子路由。

然后，我们通过 children 对象来定义子路由 '/user/info'，它对应的组件是 UserInfo。这个路由最终会渲染到父路由的 <router-view></router-view> 标签内。

小结

至此，我们已经完成了 Vue-Router 的基本用法和简单的路由嵌套示例。Vue-Router 的功能不仅限于此，还有很多其他的高级用法和技巧，希望这篇攻略能够对你在学习 Vue.js 中使用 Vue-Router 有所帮助。