/* 在脚手架中 .js可以省略 */
import obj from "./config/eobj";
export default {
name: "App",
created() {
obj.age = "29";
},
methods:{
replaceFn(){
/* replace会把当前页面替换 并不会产生历史记录 */
this.$router.replace('/login')
/* 使用原生的方式 地址需要写全,就包括了域名和端口
在开发环境中域名和端口是 开发环境http://localhost:8080/ */
/* 而生产环境的地址 是 http://aabbcc:3000/ */
/* 如果这是使用原生就需要 把之前的开发环境地址再改成生产环境
非常麻烦,所以推荐使用this.$router.replace的方式 */
// location.replace('http://localhost:8080/#/login')
/* 原生的跳转页面 也是同样的道理 需要把地址写全
不太方便,推荐使用this.$router.push */
// this.$router.push('/login')
// location.href = 'http://localhost:8080/#/login'
}
}
};
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
/* 路由是由a链接构成的 路由切换的时候
a标签上自动会加上class .router-link-exact-active */
/* 通过这个.router-link-exact-active就可以修改路由的显示样式 */
#nav a.router-link-exact-active {
color: red;
}
login页面
登录页
{{msg}}
import obj from '../config/eobj'
/* 无论是使用在js中使用import './Login.css'的方式
还是在css中使用@import url(./Login.css); 都会对全局造成影响
如果一定要把样式抽离开,请把不同的组件的类名起的不一样 */
import './Login.css'
export default {
name:"Login",
data(){
return {
msg:obj.age
}
},
methods:{
goHome(){
console.log(this.$router);
/* 路由跳转的第一种方式 */
// this.$router.push('/')
/* 路由跳转的第二种方式 */
this.$router.push({name:"Home"})
},
goAbout(i){
/* 在url上携带参数跳转到about页面 */
// this.$router.push({name:"About",query:{id:i}})
/* 使用path 是可以使用query传参 */
this.$router.push({path:"/about",query:{id:i}})
},
goMy(i){
console.log(i);
/* 使用params跳转并且传参的方式,不会把参数携带在url上 */
this.$router.push( { name:"My",params:{age:i} } )
/* ★ params传参 (无论是否使用router-link的方式) 使用path的方式 不能实现 必须要使用name的方式 */
/* this.$router.push({path:"/my",params:{age:i} }) */
}
/* 写两个按钮 通过传参的不同 跳转到对应的页面显示不同的内容 */
}
}
/* scoped限制不了@import url(./Login.css); 导入文件的方式 */
/* @import url(./Login.css); */
/* .bg{
background:greenyellow
} */
my页面
My的信息页
{{msg}}
export default {
name:"My",
data(){
return {
msg:""
}
},
methods:{
goBack(){
/* 返回上一页 this.$router.go(-1) */
this.$router.go(-1)
}
},
created(){
/* 使用$route来获取params上的参数信息 */
console.log(this.$route)
/* 判断 age 30 大于25 小于 50 显示 你还年轻
传 age 50 大于50 显示你有点老了 */
let age = this.$route.params.age;
if(25 this.msg = '你还年轻' } if(age>=50){ this.msg = '你有点老了' } } } main.js页面 import Vue from 'vue' import App from './App.vue' import axios from 'axios' /* 导入了路由 把默认的index.js文件省略了 */ import router from './router' var instance = axios.create({ baseURL: 'http://timemeetyou.com:8889/api/private/v1/', timeout: 1000, headers: {'Authorization': localStorage.token} }); /* 请求拦截 */ instance.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.reject(error); }); /* 响应拦截 */ instance.interceptors.response.use(function (response) { return response.data; }, function (error) { return Promise.reject(error); }); Vue.prototype.$axios = instance; Vue.config.productionTip = false /* 把导入的实例化对象router传入了Vue的配置项中 */ new Vue({ router, render: h => h(App) }).$mount('#app')