1.创建webpack 项目
vue init webpack myvuedemo3
2.安装路由模块,element-ui模块,axios 模块
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -s
安装 axios
npm install --save axios vue-axios
安装完以后,记得安装依赖 npm install
3.配置路由
创建路由表
1.在src下创建router 文件夹,里面创建index.js,,此时该文件就是一个路由表
import Vue from ‘vue’
import Router from ‘vue-router’
import Login from ‘…/views/Login’
//安装路由
Vue.use(Router);
export default new Router({
routes:[{
//路由路径
path:’/Login’,
//路由名称
name:Login,
//跳转到组件
component:Login,
}]
});
2.在main.js 中注册配置该路由表
import Vue from ‘vue’
import App from ‘./App’
import VueRouter from ‘vue-router’ // 全局使用路由模块
//导入上面创建的路由配置路由表
import router from ‘./router’
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(VueRouter);
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})
3.在App.vue中创建路由视图
4.在项目中使用element-ui模块
5.在发送axios 时,如何调用vue对象中的内容
//因为axios 内部的then内的this 是当前axios对象,而不是当前vue对象,因此把当前的vue对象用vm来指明,这样this不会冲突
created() {
// 因为axios 内部的then内的this 是当前axios对象,而不是当前vue对象,因此把当前的vue对象用vm来指明,这样this不会冲突
let vm =this;
this.axios({
method:‘get’,
url:‘http://www.baidu.com’
}).then(function (resp) {
});
},
5.关于路由的重定向
直接调用另一个已配置好的路由对象即可
routes:[{
//路由路径
path:’/Login’,
//路由名称
name:‘Login’,
//跳转到组件
component:Login,
},
{
path:’/Logout’,
redirect:’/Login’
},
路由传递参数 方式一
设置参数:首先在路由表配置信息如下: 第一步
{
path:’/Productinfo/:id’,
name:‘Productinfo’,
component:Productinfo
}
传参: 第二步
商品信息
接参: 第三步
接参:
商品信息
{{this.$route.params.id}}