189 lines
4.6 KiB
HTML
189 lines
4.6 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>Document</title>
|
||
<style>
|
||
.router-link-active {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
<div id="app">
|
||
<h1>Hello App!</h1>
|
||
<p>
|
||
<router-link to="/index">首页</router-link>
|
||
<router-link to="/car">购物车</router-link>
|
||
<router-link to="/about">我的</router-link>
|
||
</p>
|
||
<router-view></router-view>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
|
||
<script>
|
||
const index = {
|
||
template: `
|
||
<ul>
|
||
<li @click="enterInfo(item.id)"
|
||
v-for="item,index in newsList">{{ item.title }}</li>
|
||
</ul>
|
||
`,
|
||
data() {
|
||
return {
|
||
newsList: [
|
||
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
|
||
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
|
||
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
|
||
],
|
||
}
|
||
},
|
||
methods: {
|
||
enterInfo(id) {
|
||
this.$router.replace({
|
||
name: 'info',
|
||
query: {
|
||
id: id
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
const info = {
|
||
template: `<div>info {{ id }}</div>`,
|
||
data() {
|
||
return {
|
||
id: null
|
||
}
|
||
},
|
||
created() {
|
||
this.id = this.$route.query.id
|
||
}
|
||
}
|
||
const about = { template: '<div>about</div>' }
|
||
const car = { template: '<div>car</div>' }
|
||
const login = {
|
||
template: `<div>
|
||
<h2>登录</h2>
|
||
<button @click="Login">点我登录</button>
|
||
</div>`,
|
||
methods: {
|
||
Login() {
|
||
// 发送接口，后端返回token
|
||
var token = "sefwefewr345346456457657"
|
||
localStorage.setItem("token", token);
|
||
if (this.$route.query.hasOwnProperty("from")) {
|
||
this.$router.replace({
|
||
path: this.$route.query.from
|
||
})
|
||
} else {
|
||
this.$router.replace({
|
||
path: "/index"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const routes = [
|
||
{
|
||
path: '/',
|
||
redirect: "/index",
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
{
|
||
path: '/index',
|
||
component: index,
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
{
|
||
path: '/info',
|
||
name: 'info',
|
||
component: info,
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
{
|
||
path: '/about',
|
||
component: about,
|
||
meta: {
|
||
isLogin: true
|
||
}
|
||
},
|
||
{
|
||
path: '/car',
|
||
component: car,
|
||
meta: {
|
||
isLogin: true
|
||
}
|
||
},
|
||
{
|
||
path: '/login',
|
||
component: login,
|
||
meta: {
|
||
isLogin: false
|
||
},
|
||
beforeEnter: (to, from, next) => {
|
||
if (localStorage.getItem("token") == null) {
|
||
next()
|
||
} else {
|
||
router.back()
|
||
next()
|
||
}
|
||
}
|
||
},
|
||
]
|
||
|
||
const router = new VueRouter({
|
||
routes,
|
||
// linkActiveClass: 'active'
|
||
})
|
||
|
||
router.beforeEach((to, from, next) => {
|
||
console.log("to: ", to);
|
||
// console.log("from: ", from);
|
||
// 表示需要登录
|
||
if (to.meta.isLogin) {
|
||
|
||
// 检查当前用户是否登录
|
||
// 已登录，放行
|
||
// 未登录，去登录
|
||
|
||
// 未登录，去登录
|
||
if (localStorage.getItem("token") == null) {
|
||
next({
|
||
path: '/login',
|
||
query: {
|
||
from: to.fullPath
|
||
}
|
||
})
|
||
} else {
|
||
next()
|
||
}
|
||
|
||
// 不需要登录
|
||
} else {
|
||
next();
|
||
}
|
||
|
||
})
|
||
|
||
const app = new Vue({
|
||
el: '#app',
|
||
router
|
||
})
|
||
</script>
|
||
|
||
</html> |