211 lines
5.6 KiB
HTML
211 lines
5.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>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> |