1. 引言
通过前面的章节，我们已经学会了使用webpack来对vue项目进行打包，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
- 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
- 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
- 《Vue系列教程（08）- 基本语法》
- 《Vue系列教程（09）- 事件绑定》
- 《Vue系列教程（10）- Model数据内容双向绑定》
- 《Vue系列教程（11）- 组件详解》
- 《Vue系列教程（12）- Axios异步通信》
- 《Vue系列教程（13）- 计算属性（computed）》
- 《Vue系列教程（14）- 插槽（slot）》
- 《Vue系列教程（15）- 事件内容分发（$emit）》
- 《Vue系列教程（16）- 模块打包器（webpack）》
本文主要讲解的是vue直接的页面跳转，即使用路由vue-router来实现。
2. 什么是vue-router
Vue Router是Vue.js官方的路由管理器
它和Vue.js的核心深度集成， 让构建单页面应用变得简单
2. vue-router案例
2.1 创建项目
2.1.1 项目初始化
①新建vue-router-demo项目，并使用vscode打开（open）:
②菜单栏：Terminal -> new Terminal，并输入命令，并选择Vue 2:
vue create vue-router-demo
③创建成功：
④ 删除components文件夹里面的HelloWorld.vue文件:
⑤ 修改App.vue文件，内容如下：
<template> <h1>App页面</h1> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
2.1.2 新增需要跳转的两个模块
路由需要跳转到指定的模块，下面来定义需要跳转到的两个模块。
①在components文件夹里新建两个文件，Content.vue和Main.Vue：
② Content.vue的内容如下：
<template> <div> <h1>内容页</h1> </div> </template> <script> export default { name: "Content" } </script> <!--scoped表示作用域只为当前组件--> <style scoped> h1 { color: orange; } </style>
③ Main.vue的内容如下：
<template> <div> <h1>首页</h1> </div> </template> <script> export default { name: "Main" } </script> <style scoped> h1 { color: cornflowerblue; } </style>
2.2 vue-router路由配置
2.2.1 安装vue-router插件
① 首先安装vue-router路由插件，进入当前项目,命令行输入：
cd vue-router-demo/ npm install vue-router --save-dev
② 可以看到在node-modules里新增了vue-router依赖:
2.2.2 配置路由表
在src目录下，新建一个router文件夹，专门存放路由，配置路由index.js，如下:
import Vue from 'vue' //导入路由插件 import Router from 'vue-router' //导入上面定义的组件 import Content from '../components/Content' import Main from '../components/Main' //安装路由 Vue.use(Router); //配置路由 export default new Router({ routes: [ { //路由路径 path: '/content', //路由名称 name: 'content', //跳转到组件 component: Content }, { //路由路径 path: '/main', //路由名称 name: 'main', //跳转到组件 component: Main } ] });
2.2.3 导入声明
如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能，即在main.js文件声明导入使用vue-router，完整代码如下：
import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' // 导入VueRouter模块 //导入上面创建的路由配置目录 import router from './router' //自动扫描里面的路由配置 Vue.use(VueRouter); // 使用VueRouter模块 // 关闭生产模式下给出的提示 Vue.config.productionTip = false; new Vue({ el: '#app', router, components: {App}, template: '<App/>' })
2.3 使用路由
① 在App.vue里使用路由，完整代码如下：
<template> <div id="app"> <!-- router-link：默认会被渲染成一个<a>标签，to属性为指定链接 router-view：用于渲染路由匹配到的组件 --> <router-link to="/main">首页</router-link> <router-link to="/content">内容</router-link> <router-view></router-view> </div> </template> <script> export default { name: "App", }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
② 运行程序
npm run serve
③ 浏览器输入地址：http://localhost:8080/ ，可以看到
| 默认加载 | 点击首页 | 点击内容 |
 |
 |
 |
最后，运行的时候，控制台如果出现如下错误，解决方案可以查看：https://segmentfault.com/a/1190000006435886
