一.Vue Router路由管理器的使用
案例效果:
一.使用步骤:
定义一个html结构:
<div id="app">
<!-- 入口:使用router-link组件来导航,它会解析为a标签 -->
<router-link to="/man">男</router-link>
<router-link to="/women">女</router-link>
<!-- 出口:渲染内容 -->
<router-view></router-view>
</div>
先导入vue和vue-router文件,可以自己下载在本地导入,但前后文件不能颠倒,要先导入vue在vue-router,不然会报错,官方在线导入如下:
1.写组件
const Man= {//对象
template:'<div>我是男生</div>'
};
const Women={
template:'<div>我是女生</div>'
};
2.写路由规则(配置路由单词用的是routes)
const routes =[//数组,里面存对象,对象包含path和component(组件)属性
{
path:"/man",//写to的路径名
component:Man//写组件名
},
{
path:"/women",
component:Women
}
]
3.实例化路由对象,传入规则(路由对象单词是用的router)
const router =new VueRouter({//里面传入对象
routes//相当与于routes:routes
// routes:routes123//属性名一定要routes,值名可以自己写和路由规则一样就可以了
})
4.实例化Vue对象,把元素和对象传入到Vue实例中
let app=new Vue(
{
el:"#app",
router
}
)
二.脚手架的使用(重要,新的开发模式)
1.安装:执行下面命令
cnpm install -g @vue/cli
2.按提示一步步操作