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

211
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-23/vueRouter copy 2.html Normal file
View File

@@ -0,0 +1,211 @@
<!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>VueRouter</title>
<style>
.active,
.router-link-exact-active {
color: red;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.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 组件来导航. -->
<router-link to="/Home">首页</router-link>
<!-- <router-link to="/Info">详情页</router-link> -->
<router-link to="/My">我的</router-link>
<router-link to="/Car">购物车</router-link>
<router-link to="/Login">登录</router-link>
</p>
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
const Home = {
template: `
<div class="home">
<ul>
<li
v-for="item,index in newList"
:key="index"
@click="enterInfo(item.id,item.title)"
>{{ item.title }} </li>
</ul>
</div>
`,
data() {
return {
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
methods: {
//通过点击事件跳转页面
enterInfo(id, title) {
this.$router.replace({
name: 'info',
query:
{
id: id,
title, title
},
})
}
},
}
const Info = {
template: `
<div class="info">
<p>详情页</p>
</div>
`,
data() {
return {
id: null,
}
},
created() {
// console.log(this.$route);
this.id = this.$route.query.id
this.title = this.$route.query.title
this.getData();
},
methods: {
//发送请求
async getData() {
console.log("使用参数：", this.id, this.title, "发送ajax请求获取数据");
}
},
}
const My = {
template: `
<div class="my">
<p>我的</p>
</div>
`,
}
const Car = {
template: `
<div class="car">
<p>购物车</p>
</div>
`,
}
const Login = {
template: `
<div class="login " @click="login">
<p>登录</p>
</div>
`,
methods: {
//发送请求
async login() {
localStorage.setItem("token", "afsdgdg")
if (this.$route.query.hasOwnProperty("source")) {
this.$router.replace({
path: this.$route.query.source
})
} else {
this.$router.replace('/home')//跳转到首页
}
}
},
}
// const Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/home', name: 'home', component: Home, meta: { isLogin: false } },
//占位符:id/:page
{ path: '/info', name: 'info', component: Info, meta: { isLogin: false } },
{ path: '/my', name: 'my', component: My, meta: { isLogin: true } },
{ path: '/car', name: 'car', component: Car, meta: { isLogin: true } },
{
path: '/login', name: 'login', component: Login, meta: { isLogin: false },
beforeEnter: (to, from, next) => {
if (localStorage.getItem("token") != null) {
router.back()
//history.black()
} else {
next()
}
}
},
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
// linkExactActiveClass :'active',//修改激活样式类名
routes, // (缩写) 相当于 routes: routes
// model:'history'
})
router.beforeEach((to, from, next) => {
console.log("to:", to);
// console.log("from:",from);
// next()
if (to.meta.isLogin) {
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
source: to.fullPath
}
})
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
const app = new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>
</html>

140
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-23/vueRouter copy.html Normal file
View File

@@ -0,0 +1,140 @@
<!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>VueRouter</title>
<style>
.active,
.router-link-exact-active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<router-link to="/Home">首页</router-link>
<!-- <router-link to="/Info">详情页</router-link> -->
<router-link to="/My">我的</router-link>
<router-link to="/Car">购物车</router-link>
<router-link to="/Login">登录</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
const Home = {
template:`
<div class="home">
<ul>
<router-link
tag="li"
v-for="item,index in newList"
:key="index"
:to="{ name: 'info', params: { id: item.id, title: item.title } }"
>{{ item.title }} </router-link>
</ul>
</div>
`,
data() {
return {
newList:[
{id:1,title:'新闻1'},
{id:2,title:'新闻2'},
{id:3,title:'新闻3'},
]
}
},
methods:{},
}
const Info ={
template:`
<div class="info">
<p>详情页</p>
</div>
`,
data() {
return {
id:null,
}
},
created() {
// console.log(this.$route);
this.id = this.$route.params.id
this.title = this.$route.params.title
this.getData();
},
methods:{
//发送请求
async getData () {
console.log("使用参数：",this.id,this.title,"发送ajax请求获取数据");
}
},
}
const My ={
template:`
<div class="my">
<p>我的</p>
</div>
`,
}
const Car ={
template:`
<div class="car">
<p>购物车</p>
</div>
`,
}
const Login ={
template:`
<div class="login">
<p>登录</p>
</div>
`,
data() {},
methods:{},
}
// const Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/home', name:'home',component: Home },
//占位符:id/:page
{ path: '/info/:id/:title', name:'info',component: Info },
{ path: '/my', name:'my',component: My },
{ path: '/car', name:'car',component: Car },
{ path: '/login', name:'login',component: Login },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
// linkExactActiveClass :'active',//修改激活样式类名
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
const app = new Vue({
el:'#app',
router
})
// 现在，应用已经启动了！
</script>
</html>

124
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-23/vueRouter.html Normal file
View File

@@ -0,0 +1,124 @@
<!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>VueRouter</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<router-link to="/Home">首页</router-link>
<!-- <router-link to="/Info">详情页</router-link> -->
<router-link to="/My">我的</router-link>
<router-link to="/Car">购物车</router-link>
<router-link to="/Login">登录</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
const Home = {
template:`
<div class="home">
<ul>
<router-link tag="li" v-for="item,index in newList" :key="index" :to="{ path: '/Info', query: { id: item.id, title: item.title } }" >{{ item.title }} </router-link>
</ul>
</div>
`,
data() {
return {
newList:[
{id:1,title:'新闻1'},
{id:2,title:'新闻2'},
{id:3,title:'新闻3'},
]
}
},
methods:{},
}
const Info ={
template:`
<div class="info">
<p>详情页</p>
</div>
`,
data() {
return {
id:null,
}
},
created() {
this.id = this.$route.query.id
this.title = this.$route.query.title
this.getData();
},
methods:{
//发送请求
async getData () {
console.log("使用参数：",this.id,this.title,"发送ajax请求获取数据");
}
},
}
const My ={
template:`
<div class="my">
<p>我的</p>
</div>
`,
}
const Car ={
template:`
<div class="car">
<p>购物车</p>
</div>
`,
}
const Login ={
template:`
<div class="login">
<p>登录</p>
</div>
`,
data() {},
methods:{},
}
// const Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/Home', component: Home },
{ path: '/Info', component: Info },
{ path: '/My', component: My },
{ path: '/Car', component: Car },
{ path: '/Login', component: Login },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
const app = new Vue({
el:'#app',
router
})
// 现在，应用已经启动了！
</script>
</html>