141 lines
3.3 KiB
HTML
141 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>params</title>
|
|
</head>
|
|
<style>
|
|
.slide-fade-enter-active {
|
|
transition: all .3s ease;
|
|
}
|
|
|
|
.slide-fade-leave-active {
|
|
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
|
}
|
|
|
|
.slide-fade-enter,
|
|
.slide-fade-leave-to
|
|
|
|
/* .slide-fade-leave-active for below version 2.1.8 */
|
|
{
|
|
transform: translateX(10px);
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<h1>Hello App!</h1>
|
|
<p>
|
|
<router-link to="/">首页</router-link>
|
|
<router-link to="/car">购物车</router-link>
|
|
<router-link to="/login">登录</router-link>
|
|
|
|
|
|
</p>
|
|
<!-- 路由出口 -->
|
|
<!-- 路由匹配到的组件将渲染在这里 -->
|
|
<div class="content">
|
|
<transition name="slide-fade">
|
|
<router-view></router-view>
|
|
</transition>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="./vue.js"></script>
|
|
<script src="./vue-router.js"></script>
|
|
<script>
|
|
|
|
const Home = {
|
|
data(){
|
|
return {
|
|
list: [
|
|
{ id: 1, title: '新闻1' },
|
|
{ id: 2, title: '新闻2' },
|
|
{ id: 3, title: '新闻3' },
|
|
],
|
|
}
|
|
},
|
|
template: `
|
|
<div class="Home">
|
|
<ul>
|
|
<router-link
|
|
:to="{name:'info',params:{ id:item.id,title:item.title }}"
|
|
tag="li"
|
|
v-for="item,index in list" :key="index">
|
|
{{ item.title }}
|
|
</router-link>
|
|
</ul>
|
|
</div>`,
|
|
}
|
|
const Car = { template: '<div class="Car">Car</div>' }
|
|
const Login = {
|
|
methods:{
|
|
Login(){
|
|
localStorage.setItem("token","QEWRETHGFD124354DVFWDAV")
|
|
if(this.$route.query.hasOwnProperty("from")){
|
|
this.$router.replace({
|
|
path:this.$route.query.from
|
|
})
|
|
}else{
|
|
this.$router.replace({
|
|
path:"/"
|
|
})
|
|
}
|
|
}
|
|
},
|
|
template: '<div class="Login" @click="Login">Login</div>' }
|
|
const Info = {
|
|
created(){
|
|
console.log(this.$route.params.id);
|
|
},
|
|
// beforeRouteLeave(to, from, next){
|
|
// var isLeave = confirm("确认离开")
|
|
// if(isLeave){
|
|
// next()
|
|
// }
|
|
// },
|
|
template: `
|
|
<div class="Info">
|
|
{{ $route.params.id }}
|
|
</div>`
|
|
}
|
|
|
|
const routes = [
|
|
{ path: '/',name:'home', component: Home, meta:{isLogin:false}},
|
|
{ path: '/car',name:'car', component: Car, meta:{isLogin:true} },
|
|
{ path: '/login',name:'login', component: Login, meta:{isLogin:false} },
|
|
{ path: '/info/:id/:title',name:'info' , component: Info, meta:{isLogin:false} },
|
|
]
|
|
|
|
const router = new VueRouter({
|
|
routes // (缩写) 相当于 routes: routes
|
|
});
|
|
|
|
router.beforeEach((to, from, next) => {
|
|
if (to.meta.isLogin){
|
|
if (localStorage.getItem("token") !== null){
|
|
next()
|
|
}else{
|
|
next({
|
|
path:'/login',
|
|
query:{
|
|
from: to.path
|
|
}
|
|
})
|
|
}
|
|
}else{
|
|
next()
|
|
}
|
|
})
|
|
|
|
const app = new Vue({
|
|
router
|
|
}).$mount('#app')
|
|
|
|
</script>
|
|
</html> |