<template>
<div id="app">
<button @click="replaceFn">替换当前页面到登录页</button>
<div id="nav">
<!-- router-link也是一个组件 to跳转到router/index.js
中的path路径 -->
<router-link to="/">Home</router-link> |
<!-- 链接高亮是否 和to后面的地址包括传参有关 -->
<router-link :to="{ name: 'About', query: { id: 1 } }">About</router-link>
|
<!-- router-link跳转 配合name使用第二种跳转方式 -->
<router-link :to="{ name: 'Login' }">Login</router-link> |
<!-- <router-link :to="{name:'My'}">My</router-link> -->
<!-- <router-link :to="{path:'/my'}">My</router-link> -->
<router-link to="/my">My</router-link>
</div>
<!-- router-view 是视图渲染时候的容器
你的组件渲染在哪里？ 就是渲染在router-view组件的位置 -->
<router-view />
</div>
</template>
<script>
/* 在脚手架中 .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'
}
}
};
</script>
<style>
#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;
}
</style>
login页面
<template>
<div>
<h1 class="login-bg">登录页</h1>
<h2>{{msg}}</h2>
<button @click="goHome">返回登录页</button>
<br><br>
<button @click="goAbout(1)">返回About页1</button>
<button @click="goAbout(2)">返回About页2</button>
<br><br>
<button @click="goMy(30)">返回My1页</button>
<button @click="goMy(50)">返回My2页</button>
<br><br>
<router-link :to="{name:'My',params:{age:30} }">返回My1页</router-link>
<router-link :to="{name:'My',params:{age:50} }">返回My2页</router-link>
</div>
</template>
<script>
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} }) */
}
/* 写两个按钮 通过传参的不同 跳转到对应的页面显示不同的内容 */
}
}
</script>
<style scoped>
/* scoped限制不了@import url(./Login.css); 导入文件的方式 */
/* @import url(./Login.css); */
/* .bg{
background:greenyellow
} */
</style>
my页面
<template>
<div>
<button @click="goBack">返回上一页</button>
<h1 class="my-bg">My的信息页</h1>
<h2>{{msg}}</h2>
</div>
</template>
<script>
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<age&&age<50){
this.msg = '你还年轻'
}
if(age>=50){
this.msg = '你有点老了'
}
}
}
</script>
<style>
</style>
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')
