vue脚手架的安装及路由

一个菜鸟大学生

已于 2022-10-11 21:23:45 修改

阅读量402

点赞数

文章标签： vue.js 前端 javascript 前端框架

于 2022-10-11 21:22:15 首次发布

本文链接：https://blog.csdn.net/m0_68907098/article/details/127271347

版权

脚手架

脚手架的安装

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

安装教程：

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

npm i -g @vue/cli

检测是否安装成功

vue-V

创建项目：

创建你的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) //两个都是前进到下一个页面