路由 +vue脚手架

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：路由 +vue脚手架

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装

安装

	1.nodejs安装
	2.脚手架全局安装
		npm i -g @vue/cli
	3. 检测是否安装成功
		vue -V

二、创建项目

1.切换到根目录/项目需要所在目录
	cd  /
2.vue create myvue
	创建一个myvue项目

三、运行项目

1.cd  myvue
	切换到项目目录
2.npm run serve
	运行项目

四、.vue文件

1. vue组件
2. 复习vue的语法
3. 加载提示组件 

五、什么时候用props

当数据不需要修改，且需要从父组件获取

六.什么时候用data

当数据需要修改的时候
能用props解决就用props

七、spa

1.	singlePageApplication
一个网站的所有页面都集成在一个html文件里面
通过切换div模拟页面的切换
2.优点
	a. 资源公用
	b. 前后端分离
	c. 页面切换流畅
3.缺点
	a. 对SEO 搜索引擎不友好
4.原理：
	a.地址改变
	b.不刷新页面
   c.监听地址栏变化实现页面局部更新
5.Hash路由
	a.锚点（hash）变化不会刷新页面
	b.window.onhashchange
6.历史记录路由
	a.H5 新增特性
	b.history.onpopstate

一.1、Vue路由

1.内置组件 App.vue
	a.router-link
		改变地址栏，改变hash值的
	b.router-view
		存放页面
2./router/index.js  路由配置

	{ path:"/",    //配置的地址
  		component:HomeView    //配置的页面组件
	}

二、路由配置

普通

{path:"/user",
 name:"user",
 component:()=>import(xxx)
}

传参

	{
path:"/produce/:id",
name:"",
component:()=>import(xxx)
}

子路由

	{path:"/admin",
 name:"admin",
 component:()=>import(xxx)
 children:[
   {path:"dash",component:yyy},
   {path:"dash",component:zzz},
   //重定向
   {path:'',redirect:'dash'}
  ]
}

404

	1. 配置在最后面
2. path值为*
{
   path:"*",
   component:NoMatch
}

路由的别名

{
   path:"/",
  alias:["/index","/main"]
}

三、$route 当前路由信息

1.name 名称
2.params 路由参数
3.path 路径
4.fullPath全路径
5.query查询参数
6.hash哈希
7.meta 元信息

四、路由组件

router-link 切换路由

to属性 改变地址栏
.to="/user"
:to="'/user'"
:to="{name:'user',params:{},query:{}}"
:to="{path:''/produce/123'}"

router-view 存放路由

五、router-link to跳转

六、编程跳转 $router

1、.push("/") 跳转并添加一个历史记录
2、.replace("/") 跳转替换（不留当前历史记录）
3、.back() 返回
4、.forward() 前进
5、.go(-1) 返回一步
6、.go(1) 前进一步