Vue2教程 - 17 路由

什么是路由？

路由是构建单页面应用（SPA）的重要组成部分，使用路由可以通过不同的URL路径来访问不同的页面组件，而无需重新加载整个页面。

也就是说路由可以根据不同的URL实现页面组件的切换，不需要重新加载整个页面。

17.1 vue-router

Vue2 中的路由是由 vue-router 库提供的，它是一个为 Vue.js 应用设计的官方路由管理器，它和Vue.js的核心深度集成。

也就是说在Vue2 中时候用 Vue Router 实现路由管理。

1 vue-router安装

我们在使用 vue-cli 创建项目的时候，如果勾选了 router，那么在创建的项目中是集成了 vue-router 的。在项目 src 下会生成router 文件夹，在文件夹下会有 index.js ，其中配置了初始项目的路由配置：

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面代码中创建了 VueRouter 对象，在 routes 中定义了各个页面的路由。

并在项目的 main.js 中引入路由配置：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

如果在创建项目的时候没有勾选安装 vue-router，那么需要用 npm 或 cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

# npm安装
npm install vue-router@3

# yarn安装
yarn add vue-router@3

在 Vue2 中只能使用 vue-router3 版本。

然后在 src 目录下新建 router 文件夹，然后在其下新建 index.js，并编辑内容如下：

内容未完......

查看完整内容 →