160 lines
4.2 KiB
HTML
160 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
.active {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="app">
|
||
<router-view></router-view>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
||
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
|
||
<script>
|
||
const Index = {
|
||
data() {
|
||
return {
|
||
list: [
|
||
{ id: 1, title: '新闻1' },
|
||
{ id: 2, title: '新闻2' },
|
||
{ id: 3, title: '新闻3' },
|
||
]
|
||
}
|
||
},
|
||
template: `<div class="index">
|
||
<ul>
|
||
<router-link tag="li" :to="{ name: 'info', query: { id: item.id } }" v-for="item,index in list" :key="index">
|
||
{{ item.title }}
|
||
</router-link>
|
||
</ul>
|
||
</div>`,
|
||
methods: {
|
||
goInfo(id) {
|
||
this.$router.push({
|
||
name: 'info',
|
||
params: {
|
||
// id: id,
|
||
id
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
const Info = {
|
||
template: `<div class="info">详情</div>` ,
|
||
created() {
|
||
console.log(this.$route.query.id);
|
||
},
|
||
}
|
||
|
||
const Car = {
|
||
template: `<div class="info">购物车</div>` ,
|
||
created() {
|
||
|
||
},
|
||
}
|
||
|
||
const Login = {
|
||
template: `<div class="info">
|
||
登录页面
|
||
<button @click="login">登录</button>
|
||
</div>` ,
|
||
created() {
|
||
|
||
},
|
||
methods: {
|
||
login() {
|
||
localStorage.setItem("token", "effdasfgfdasgfnbfddg")
|
||
if (this.$route.query.from) {
|
||
this.$router.push(this.$route.query.from)
|
||
} else {
|
||
this.$router.push("/")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const Error = {
|
||
template: `<div class="error">404 页面不存在</div>` ,
|
||
created() {
|
||
|
||
},
|
||
}
|
||
|
||
const Layout = {
|
||
template: `<div class="Layout">
|
||
<h1>Hello App!</h1>
|
||
<p>
|
||
<router-link to="/">Go to Foo</router-link>
|
||
<router-link to="/info">Go to Bar</router-link>
|
||
</p>
|
||
<router-view></router-view>
|
||
</div>` ,
|
||
created() {
|
||
|
||
},
|
||
}
|
||
|
||
const routes = [
|
||
{ path: '*', component: Error},
|
||
{
|
||
path: '/',
|
||
name: 'layout',
|
||
component: Layout,
|
||
children: [
|
||
{ path: 'login', name: 'login', component: Login, meta: { requiresAuth: false, title: '登录' } },
|
||
{ path: 'car', name: 'car', component: Car, meta: { requiresAuth: true, title: '购物车' } },
|
||
{ path: '/', name: 'index', component: Index, meta: { requiresAuth: false, title: '首页' } },
|
||
{ path: 'info', name: 'info', component: Info, meta: { requiresAuth: false, title: '详情' } }
|
||
]
|
||
}
|
||
]
|
||
|
||
const router = new VueRouter({
|
||
linkExactActiveClass: "active",
|
||
routes
|
||
})
|
||
|
||
// 登录状态检查
|
||
router.beforeEach((to, from, next) => {
|
||
document.title = to.meta.title;
|
||
// 未登录
|
||
if (localStorage.getItem("token") == null) {
|
||
// 你访问的页面还需要登录
|
||
if (to.meta.requiresAuth) {
|
||
next({
|
||
name: 'login',
|
||
query: {
|
||
from: to.fullPath
|
||
}
|
||
})
|
||
} else {
|
||
next()
|
||
}
|
||
} else {
|
||
next()
|
||
}
|
||
})
|
||
|
||
const app = new Vue({
|
||
el: "#app",
|
||
router
|
||
})
|
||
|
||
|
||
|
||
// 对比原生js，为什么需要 vue-router 这样的插件来实现页面跳转
|
||
//
|
||
|
||
</script>
|
||
</html> |