路由介绍
vue属于单页面应用程序（Single Page Application , SPA），也就是说一个网站中显示一个页面，所有的功能与交互都在这唯一的一个页面内完成
所谓路由，其实就是根据浏览器的访问路径不同，将不同的组件渲染到唯一的一个页面上
而路由的核心就是配置页面路径和访问组件之间的映射关系
路由安装
vue-router是vue官方提供的一个模块，使用前需下载安装，官方文档地址：Vue Router
安装vue-router包(项目内安装)
vue2 项目，要指定版本安装
npm i [email protected]
创建路由模块
在src/router/index.js中编写下面内容
// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)
// 3. 配置路由规则
const routes = []
// 4. 创建路由的实例对象
const router = new VueRouter({
/*路由的配置*/
routes
})
// 5. 导出路由的实例对象
export default router创建并挂载路由模块
修改main.js，导入路由的配置
import Vue from 'vue'
import App from './App.vue'
// 1. 导入路由模块
import router from '@/router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 2. 挂载路由模块
router
}).$mount('#app')验证
浏览器访问localhost:8080 ，如果路径后自动添加了 /#/ ，则基本上配置成功
上述步骤，无需死记硬背，后面在安装新项目的时候，可以一键生成
路由配置
VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件
<router-link>：路由链接组件，浏览器会解析成<a>
<router-view>：路由视图组件，用来展示与路由路径匹配的视图组件
核心步骤：
-
配置路由规则（router/index.js中）
-
设置超链接（router-link）
-
设置路由锚点（router-view)
① 配置路由规则（router/index.js中）
② 设置超链接（router-link）
③ 设置路由锚点（router-view）
如果下面报错，可以执行：npm install less-loader less
