bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
历届学生/fontendseven/每天课程/2021-12-14/vue-router.html Normal file
View File

@@ -0,0 +1,257 @@
<!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>