动态路由的匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
var ComDesc = {
data(){
return {
msg:''
}
},
template:`
<div>
我是{{msg}}
</div>
`,
created() {
this.msg = 'frontend';
},
watch: {
'$route'(to,from){
console.log(to);
console.log(from);
this.msg = to.params.id;
}
},
}
var Timeline = {
template:`
<div id="timeline">
<router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<router-link :to="{name:'comDesc',params:{id:'backend'}}">后端</router-link>
<router-view></router-view>
</div>
`
}
var Pins = {
template:`
<div>我是沸点</div>
`
}
var router = new VueRouter({
routes:[
{
path:'/timeline',
component:Timeline,
children:[
{
name:'comDesc',
path:'/timeline/:id',
component:ComDesc
}
]
},
{
path:'/pins',
component:Pins
}
]
})
var App = {
template:`
<div>
<router-link to='/timeline'>首页</router-link>
<router-link to='/pins'>沸点</router-link>
<router-view></router-view>
</div>
`
}
new Vue({
el:"#app",
router,
template:'<App/>',
components:{
App
}
})
</script>
</body>
</html>
keep-alive在路由中的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
var Timeline = {
template:`
<div id="timeline">
我是首页
</div>
`,
created() {
console.log("首页组件创建")
},
mounted() {
console.log('首页组件DOM加载了')
},
destroyed() {
console.log('首页组件销毁了')
},
}
var Pins = {
template:`
<div>
<h3 @click='clickHandler'>我是沸点</h3>
</div>
`,
methods: {
clickHandler(e){
e.target.style.color = 'red';
}
},
created() {
console.log("沸点组件创建")
},
mounted() {
console.log('沸点组件DOM加载了')
},
destroyed() {
console.log('沸点组件销毁了')
}
}
var router = new VueRouter({
routes:[
{
path:'/timeline',
component:Timeline
},
{
path:'/pins',
component:Pins
}
]
})
var App = {
template:`
<div>
<router-link to='/timeline'>首页</router-link>
<router-link to='/pins'>沸点</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
`
}
new Vue({
el:"#app",
router,
template:'<App/>',
components:{
App
}
})
</script>
</body>
</html>
meta的使用_控制权限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/blog">我的博客</router-link>
<router-link to="/login">登陆</router-link>
<a href="javascript:void(0)">退出</a>
<router-view></router-view>
</div>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
Vue.use(VueRouter);
var Home = {
template:`
<div>
我是首页
</div>
`
}
var Blog = {
template:`
<div>
我是博客
</div>
`
}
var Login = {
data(){
return{
name:'',
pwd:''
}
},
template:`
<div>
<input type="text" v-model="name" />
<input type="password" v-model="pwd" />
<input type="button" value="登陆" @click="loginHandler">
</div>
`,
methods: {
loginHandler(){
// 登陆
localStorage.setItem('user',{name:this.name,pwd:this.pwd})
// 跳转到博客页面
this.$router.push({
name:'blog'
})
}
},
}
var router = new VueRouter({
routes:[
{
path:'/',
redirect:'/home'
},
{
path:'/home',
component:Home
},
{
path:'/blog',
component:Blog,
name:'blog',
// 给未来的路由做权限控制
meta:{
// 证明用户访问该组件的时候需要登陆
auth:true
}
},
{
path:'/login',
component:Login
}
]
})
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
if(to.meta.auth){
//用户点击了博客链接 该用户需要登陆
if(localStorage.getItem('user')){
next();
}else{
next({
path:'/login'
});
}
}else{
next();
}
})
new Vue({
el:"#app",
router,
})
</script>
</body>
</html>
axios的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="vue.min.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
var App = {
template:`
<div>
<button @click="sendAjax">发请求</button>
</div>
`,
methods: {
sendAjax(){
this.$axios.get('http://127.0.0.1:8888/').then(res=>{
console.log(res.data.msg);
}).catch(err=>{
console.log(err);
})
}
},
}
Vue.prototype.$axios = axios;
new Vue({
el:"#app",
template:'<App/>',
components:{
App
}
})
</script>
</body>
</html>
并发请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="vue.min.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
var App = {
data(){
return{
res1:'',
res2:''
}
},
template:`
<div>
响应1:{{res1}}
响应2:{{res2}}
<button @click='sendAjax'>发送请求</button>
</div>
`,
methods: {
sendAjax(){
// get :/
// post :/add
this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';
var r1 = this.$axios.get('');
var r2 = this.$axios.post('add',"a=1");
this.$axios.all([r1,r2]).then(this.$axios.spread((res1,res2)=>{
// 请求全部成功
this.res1 = res1.data;
this.res2 = res2.data;
})).catch(err=>{
// 其一失败
console.log(err);
})
}
},
}
Vue.prototype.$axios = axios;
new Vue({
el:"#app",
template:'<App/>',
components:{
App
}
})
</script>
</body>
</html>
