144 lines
3.7 KiB
HTML
144 lines
3.7 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>路由</title>
|
|
<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>
|
|
</head>
|
|
|
|
<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", "Q3456TRFGTHR6Y4R3.3454.4356")
|
|
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
|
|
});
|
|
|
|
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({
|
|
el: '#app',
|
|
router
|
|
})
|
|
</script>
|
|
|
|
</html> |