Vue Router 学习笔记 一

安装

--save-dev安装包开发环境简写 -D

npm install vue-router --save-dev

再装一下几个要用的插件element-ui、sass-loader 和 node-sass 四个插件

# 安装 element-ui
npm i element-ui -S
# 安装 SASS 加载器
npm i sass-loader node-sass -D

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

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

Vue.use(VueRouter)

其实我是直接用 Vue UI 创建的项目，记得选上路由和样式加载器就好了。

路由的基本用法

创建项目的模板已经实现了一个最基本的路由功能，我们来看一下吧

加载路由组件

首选这是主js，所有的组件加载、实例化都是由此处开始的。

项目根组件

最终会变成两个标签
to="/" 就是路由要解析的路径。
用于给路由解析出来的组件占位。（此标签本身被替换掉）

视图组件

两个简单的视图（页面），对应上面两个 标签
Home.vue的内容是从HelloWorld.vue加载进来的。
About.vue内容就一个h1标签。

路由配置

Home.vue 直接导入
About.vue 懒加载
Vue.use(VueRouter) ：路由插件是一个函数使用前要先调用一下。
path：访问路径
name：视图名
component：路由到的组件

参考资料

Vue Router 官网
Vue UI 学习笔记（基本操作）