Vue脚手架及路由（小白）

vue脚手架的安装

安装环境

		是基于node的环境    创建复杂的vue项目的开发

安装

	第一步要先安装node.js
	第二步全局安装vue脚手架   npm i-g@vue/cli
	第三步检测是否安装成功  vue -V

创建项目

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

运行项目

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

vue路由

Vue路由的内置组件

<router-link to='/user'></router-link>//改变地址栏、改变hash值
//to属性  改变地址栏信息
<router-view></router-view>//存放页面

路由的配置

//配置的文件地址  /router/index.js
{
	path:"/"//配置的地址，
	component：HomeView//配置的页面组件名
}
//普通路由的配置
{
	path："/user",
	name:'user',
	component:()=>import('xxx')//组件地址
}
//路由传参
{
	path:'/produce/:id',
	name:'produce',
	component:()=>import('xxx')
}
//参数应用（组件内）
//{{$route.params.id}}
//路由传参父组件中的应用
<router-link to="/produce/123">123</router-link>
//子路由
{
	path：'/user',
	name：'user',
	component：（）=>import{"xxx"},
	children：[
		{path：'dash'，name：'dash'，component：xxx},
		{path：'dash2'，name：'dash2'，component：xxx}
		//重定向
		{path：''，redirect：'dash'}
​	]
​}
//404的配置
//1、需要配置在最后面
//2、path值为*
{
	path：'*',
	component：NoMatch
​}

编程跳转 $router

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

未完…