257 lines
6.0 KiB
HTML
257 lines
6.0 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> vue-router</title>
|
||
<style>
|
||
.bounce-enter-active {
|
||
animation: bounce-in .5s;
|
||
}
|
||
|
||
.bounce-leave-active {
|
||
animation: bounce-in .5s reverse;
|
||
}
|
||
|
||
@keyframes bounce-in {
|
||
0% {
|
||
transform: scale(0);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.5);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
|
||
<p>
|
||
<router-link to="/home">首页</router-link>
|
||
<router-link to="/type">分类</router-link>
|
||
<router-link to="/car">购物车</router-link>
|
||
<router-link to="/me">我的</router-link>
|
||
|
||
</p>
|
||
<div class="content">
|
||
<transition name="bounce">
|
||
<router-view></router-view>
|
||
</transition>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
||
|
||
<script>
|
||
// vue-router 路由管理工具 管理页面地址，你输入什么地址看到什么页面
|
||
// 路由？
|
||
// 你输入一个地址，看到对应页面
|
||
// router-link 标签（组件） 页面跳转（a）
|
||
// 两种路由模式
|
||
// hash 路由
|
||
// http://www.bmy.com/#/about
|
||
// http://www.bmy.com/#/index
|
||
// http://www.bmy.com/#/info?id=3
|
||
// window.location.hash 和 hashchange 事件 来实现
|
||
|
||
// history 路由
|
||
// http://www.bmy.com/about
|
||
// http://www.bmy.com/index
|
||
// history.pushState 和 history.replaceState 和 onpopstate 事件 来实现
|
||
|
||
// query
|
||
// http://www.bmy.com/#/about?id=1&page=1
|
||
|
||
// params
|
||
// http://www.bmy.com/#/about/1/1
|
||
|
||
// $router 获取路由跳转的各个方法
|
||
// $route 获取路由访问的地址信息
|
||
|
||
// 导航守卫
|
||
// 全局守卫
|
||
// 路由独享的守卫
|
||
// 组件独享的守卫
|
||
|
||
const Home = {
|
||
data() {
|
||
return {
|
||
list: [
|
||
{ id: 1, title: '商品1' },
|
||
{ id: 2, title: '商品2' },
|
||
{ id: 3, title: '商品3' },
|
||
{ id: 4, title: '商品4' },
|
||
]
|
||
}
|
||
},
|
||
template: `
|
||
<div class="home">
|
||
<ul>
|
||
<li v-for="(item,index) in list" :key="index" @click="goInfo(index)">
|
||
{{ item.title }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
`,
|
||
methods: {
|
||
goInfo(index) {
|
||
this.$router.push({
|
||
name: 'info',
|
||
query: {
|
||
id: this.list[index].id,
|
||
title: this.list[index].title,
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
const Type = {
|
||
template: '<div>分类</div>'
|
||
}
|
||
|
||
const Car = {
|
||
template: '<div>购物车</div>'
|
||
}
|
||
|
||
const Me = {
|
||
template: `
|
||
<div >
|
||
我的
|
||
</div>`
|
||
}
|
||
|
||
const Info = {
|
||
template: `
|
||
<div class="info">详情</div>
|
||
`,
|
||
created() {
|
||
console.log(this.$route.query.id);
|
||
console.log(this.$route.query.title);
|
||
}
|
||
}
|
||
|
||
const Login = {
|
||
template: `
|
||
<div class="login">
|
||
登录页面
|
||
<button @click="UserLogin">点击登录</button>
|
||
</div>
|
||
`,
|
||
methods: {
|
||
UserLogin() {
|
||
// 调用ajax 拿到token，保存到本地
|
||
|
||
localStorage.setItem("token", "wqewqrr")
|
||
if (this.$route.query.hasOwnProperty("from")) {
|
||
this.$router.replace({
|
||
path: this.$route.query.from
|
||
})
|
||
} else {
|
||
this.$router.replace("/")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const routes = [
|
||
{
|
||
path: '/',
|
||
redirect: '/home',
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
{
|
||
path: '/home',
|
||
component: Home,
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
{
|
||
path: '/type',
|
||
component: Type,
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
{
|
||
path: '/car',
|
||
component: Car,
|
||
meta: {
|
||
isLogin: true
|
||
}
|
||
},
|
||
{
|
||
path: '/me',
|
||
component: Me,
|
||
meta: {
|
||
isLogin: true
|
||
}
|
||
},
|
||
{
|
||
path: '/info',
|
||
name: 'info',
|
||
component: Info,
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
{
|
||
path: '/login',
|
||
name: 'login',
|
||
component: Login,
|
||
meta: {
|
||
isLogin: false
|
||
}
|
||
},
|
||
]
|
||
|
||
const router = new VueRouter({
|
||
mode: 'hash',
|
||
routes
|
||
});
|
||
|
||
// 登录拦截
|
||
router.beforeEach((to, from, next) => {
|
||
// 表示未登录
|
||
if (localStorage.getItem("token") == null) {
|
||
// 需要登录才可以查看的页面
|
||
if (to.meta.isLogin) {
|
||
next({
|
||
path: "/login",
|
||
query: {
|
||
from: to.fullPath
|
||
}
|
||
})
|
||
|
||
// 不需要登录就可以查看的页面
|
||
} else {
|
||
next()
|
||
}
|
||
// 表示登录过了
|
||
} else {
|
||
next()
|
||
}
|
||
})
|
||
|
||
|
||
const app = new Vue({
|
||
el: '#app',
|
||
router
|
||
})
|
||
</script>
|
||
|
||
</html> |