脚手架

脚手架的安装

首先要声明的是，脚手架的安装是基于node.js环境下安装的，没有安装node.js的可以去官网下载一个。

安装教程：

win+R输入cmd进入控制面板，然后输入下列指令，经行全局安装

npm i -g @vue/cli

检测是否安装成功

vue-V

创建项目：

切换到根目录，项目所需目录cd /

创建你的vue项目

vue create myvue

运行项目：

切换到你创建项目的文件夹

cd myvue

运行项目

npm run serve

接下来你就可以看到下面的两个本地网址，随便复制一个到浏览器当中去打开就能看见你的页面类容

Vue路由

个人理解：给我一个路径，由我去决定给你展示某个组件

SPA:singlePageApplication,一个网站的所有页面都集成在一个html文件里面通过切换div模拟页面切换

优点：资源公用，前后端分离，页面切换流畅

缺点：对SEO的搜索引擎不友好

原理：地址改变，不刷新页面，监听地址栏实现局部更新

Hash路由

锚点变化不会刷新页面

window.onhashchange

内置组件

App.vue

router-link,改变地址栏，改变hash值

router-view，存放页面

路由的配置

在router/index文件里进行配置

路由配置的三种方法

普通

传参

子路由

404页面的设置

路由的信息（$route）

name //名称
params //路由参数
path //路径
fullPath //全路径
query //查询参数
hash //哈希
meta //元信息

切换路由

router-link to="/user"//切换路由
router-link to="{name:'user',params:{},query:{}}"
router-link to="{path:"path:'/produce/123'"}"

编程式路由

$router.push("./") //跳转并添加一个历史记录
$router.replace('/') //跳转替换（不保留当前历史记录）
$router.back()
$router.go(-1) //两个都是返回上一个页面
$router.forward()
$router.go(1) //两个都是前进到下一个页面