parent
926783a01f
commit
1e249c65cc
11 changed files with 391 additions and 18 deletions
@ -0,0 +1,34 @@ |
||||
<template> |
||||
<div> |
||||
<div class="row"> |
||||
<Banner/> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-xs-2 col-xs-offset-2"> |
||||
<div class="list-group"> |
||||
<!-- router-link 的 replace 和 push模式 设置为replace后无法后退，默认为push模式--> |
||||
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> |
||||
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link> |
||||
<!-- <a class="list-group-item active" href="./about.html">About</a>--> |
||||
<!-- <a class="list-group-item" href="./home.html">Home</a>--> |
||||
</div> |
||||
</div> |
||||
<div class="col-xs-6"> |
||||
<div class="panel"> |
||||
<div class="panel-body"> |
||||
<router-view></router-view> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Banner from "@/components/Banner.vue"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: {Banner} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div class="col-xs-offset-2 col-xs-8"> |
||||
<div class="page-header"> |
||||
<h2>Vue Router Demo</h2> |
||||
<button @click="back">后退</button> |
||||
<button @click="forward">前进</button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Banner", |
||||
methods: { |
||||
back() { |
||||
this.$router.back() |
||||
}, |
||||
forward() { |
||||
this.$router.forward() |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,23 @@ |
||||
// 引入Vue
|
||||
import Vue from "vue"; |
||||
// 引入App
|
||||
import App from "./App"; |
||||
// 引入VueRouter
|
||||
import VueRouter from "vue-router"; |
||||
// 引入router
|
||||
import router from "@/router"; |
||||
|
||||
// 设置Vue
|
||||
Vue.config.productionTip = false |
||||
|
||||
// 使用插件
|
||||
Vue.use(VueRouter) |
||||
|
||||
// 实例化Vue
|
||||
new Vue({ |
||||
components: { |
||||
App |
||||
}, |
||||
render: h => h(App), |
||||
router: router, |
||||
}).$mount('#app') |
||||
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<h2>我是About的内容</h2> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "About", |
||||
mounted() { |
||||
console.log('About组件挂着完成', this) |
||||
window.aboutRoute = this.$route |
||||
window.aboutRouter = this.$router |
||||
}, |
||||
beforeDestroy() { |
||||
console.log('About组件即将销毁') |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,17 @@ |
||||
<template> |
||||
<ul> |
||||
<li>消息编号：{{id}}</li> |
||||
<li>消息标题：{{title}}</li> |
||||
</ul> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: "Detail", |
||||
props:['id', 'title'], |
||||
mounted() { |
||||
console.log(this.$route) |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,40 @@ |
||||
<template> |
||||
<div> |
||||
<h2>Home组件内容</h2> |
||||
<div> |
||||
<ul class="nav nav-tabs"> |
||||
<li> |
||||
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link> |
||||
</li> |
||||
<li> |
||||
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link> |
||||
</li> |
||||
</ul> |
||||
<ul> |
||||
<keep-alive include="News"> |
||||
<!--include是组件名--> |
||||
<!--多个组件的写法为 :include=['News','Message']--> |
||||
<router-view></router-view> |
||||
</keep-alive> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Home", |
||||
mounted() { |
||||
console.log('Home组件挂着完成', this) |
||||
window.homeRoute = this.$route |
||||
window.homeRouter = this.$router |
||||
}, |
||||
beforeDestroy() { |
||||
console.log('Home组件即将销毁') |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,68 @@ |
||||
<template> |
||||
<div> |
||||
<ul> |
||||
<li v-for="m in messageList" :key="m.id"> |
||||
<!-- to的普通写法--> |
||||
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>--> |
||||
<!-- to的对象写法--> |
||||
<router-link :to="{ |
||||
// path: '/home/message/detail', |
||||
name: 'xiangqing', |
||||
query: { |
||||
id: m.id, |
||||
title: m.title |
||||
} |
||||
}"> |
||||
{{ m.title }} |
||||
</router-link> |
||||
<button @click="pushShow(m)">push查看</button> |
||||
<button @click="replaceShow(m)">replace查看</button> |
||||
</li> |
||||
</ul> |
||||
<hr> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import detail from "@/pages/Detail.vue"; |
||||
|
||||
export default { |
||||
name: "Message", |
||||
computed: { |
||||
detail() { |
||||
return detail |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
messageList: [ |
||||
{id: '001', title: '消息001'}, |
||||
{id: '002', title: '消息002'}, |
||||
{id: '003', title: '消息003'} |
||||
] |
||||
} |
||||
}, |
||||
methods:{ |
||||
pushShow(m) { |
||||
// console.log(this.$router) |
||||
this.$router.push({ |
||||
name: 'xiangqing', |
||||
query: { |
||||
id: m.id, |
||||
title: m.title, |
||||
} |
||||
}) |
||||
}, |
||||
replaceShow(m) { |
||||
this.$router.replace({ |
||||
name: 'xiangqing', |
||||
query: { |
||||
id: m.id, |
||||
title: m.title, |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div> |
||||
<ul> |
||||
<li :style="{opacity}">欢迎学习Vue</li> |
||||
<li>news001 <input type="text"></li> |
||||
<li>news002 <input type="text"></li> |
||||
<li>news003 <input type="text"></li> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "News", |
||||
data() { |
||||
return {opacity: 1} |
||||
}, |
||||
beforeDestroy() { |
||||
console.log("News即将被销毁") |
||||
}, |
||||
activated() { |
||||
this.timer = setInterval(() => { |
||||
console.log("@") |
||||
this.opacity -= 0.01 |
||||
if (this.opacity <= 0) this.opacity =1 |
||||
}, 16) |
||||
}, |
||||
deactivated() { |
||||
clearInterval(this.timer) |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,107 @@ |
||||
import VueRouter from "vue-router"; |
||||
|
||||
// 引入组件
|
||||
import About from "@/pages/About.vue" |
||||
import Home from "@/pages/Home.vue" |
||||
import News from "@/pages/News.vue" |
||||
import Message from "@/pages/Message.vue"; |
||||
import Detail from "@/pages/Detail.vue"; |
||||
|
||||
// 创建一个路由器
|
||||
const router = new VueRouter({ |
||||
routes: [ |
||||
{ |
||||
name: 'guanyu', |
||||
path: '/about', |
||||
component: About, |
||||
meta: { |
||||
title: '关于' |
||||
} |
||||
}, |
||||
{ |
||||
name: 'zhuye', |
||||
path: '/home', |
||||
component: Home, |
||||
meta: { |
||||
title: '主页' |
||||
}, |
||||
children: [ |
||||
{ |
||||
name: 'xinwen', |
||||
path: 'news', |
||||
component: News, |
||||
meta: { |
||||
isAuth: true, |
||||
title: '主页' |
||||
}, |
||||
beforeEnter: (to,from,next)=>{ |
||||
console.log('独享路由守卫', to, from) |
||||
if (localStorage.getItem('school') === 'atguigu'){ |
||||
next() |
||||
}else{ |
||||
alert('学校名称不对，无权查看！') |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
name: 'xiaoxi', |
||||
path: 'message', |
||||
component: Message, |
||||
meta: { |
||||
isAuth: true, |
||||
title: '主页' |
||||
}, |
||||
children: [ |
||||
{ |
||||
name: 'xiangqing', |
||||
path: 'detail/:id/:title', |
||||
component: Detail, |
||||
meta: { |
||||
title: '详情' |
||||
}, |
||||
// props的第一种写法，key-val格式，通过props的方式传给detail组件
|
||||
// props: {a:1,b:'hello'}
|
||||
// props的第二种写法，布尔值，若布尔值为真，就会把路由组件收到的params参数以props的形式传给detail
|
||||
// props: true
|
||||
// props的第三种写法，函数形式
|
||||
props($route) { |
||||
return { |
||||
id: $route.query.id, |
||||
title: $route.query.title |
||||
} |
||||
} |
||||
// 解构赋值的写法
|
||||
// props({query:{id,title}}) {
|
||||
// return {id, title}
|
||||
// }
|
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
] |
||||
}) |
||||
|
||||
// 全局前置路由守卫--初始化的时候被调用、每次路由切换之前被调用
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// console.log('前置路由守卫', to, from)
|
||||
// // if (to.name === 'xinwen' || to.name === 'xiaoxi') {
|
||||
// // if (to.path === '/home/news' || to.path === '/home/message') {
|
||||
// if (to.meta.isAuth) {
|
||||
// if (localStorage.getItem('school') === 'atguigu') {
|
||||
// next()
|
||||
// }else{
|
||||
// alert('学校名称错误，无权限查看')
|
||||
// }
|
||||
// }else{
|
||||
// next()
|
||||
// }
|
||||
// })
|
||||
|
||||
// 全局后置路由守卫--初始化的时候被调用、每次路由切换之后被调用
|
||||
// router.afterEach((to, from)=>{
|
||||
// console.log('后置路由守卫', to, from)
|
||||
// document.title = to.meta.title || '系统'
|
||||
// })
|
||||
|
||||
export default router |
||||
Loading…
Reference in new issue