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) 前进一步
未完…
版权声明:本文为Liucaicaia原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。