236 lines
5.6 KiB
HTML
236 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>vue-router</title>
|
|
<style>
|
|
.active {
|
|
color: red;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to
|
|
|
|
/* .fade-leave-active below version 2.1.8 */
|
|
{
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<h1>Hello App!</h1>
|
|
<p>
|
|
<!-- 使用 router-link 组件来导航. -->
|
|
<!-- 通过传入 `to` 属性指定链接. -->
|
|
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
|
|
<router-link to="/">首页</router-link>
|
|
<router-link to="/my">我的</router-link>
|
|
</p>
|
|
<transition name="fade">
|
|
<router-view></router-view>
|
|
</transition>
|
|
</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>
|
|
// 1. 定义 (路由) 组件。
|
|
const Home = {
|
|
template: `
|
|
<div class="home">
|
|
首页
|
|
<button @click="GoLogin">登录</button>
|
|
<ul>
|
|
<router-link :to="{ path: 'info', query: { title: item.title, id: item.id } }" tag="li" v-for="(item,index) in shopList" :key="index">
|
|
{{ item.title }}
|
|
</router-link>
|
|
</ul>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
shopList: [
|
|
{ id: 1, title: 'MBP最新款', price: 21000 },
|
|
{ id: 2, title: 'iphone最新款', price: 9000 },
|
|
{ id: 3, title: '鞋子最新款', price: 400 },
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
GoLogin() {
|
|
this.$router.push("/login")
|
|
// this.$router.push({
|
|
// path: '/login',
|
|
// query: {
|
|
// id: "111"
|
|
// }
|
|
// })
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
const Info = {
|
|
template: `<div>详情页面</div>`,
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
created() {
|
|
// $route 获取路由的配置信息
|
|
// $router vuerouter的所有方法
|
|
console.log(this.$route.query.id, this.$route.query.title);
|
|
},
|
|
}
|
|
|
|
const Login = {
|
|
template: `
|
|
<div @click="login">登录页面</div>
|
|
`,
|
|
methods: {
|
|
login() {
|
|
localStorage.setItem("token", '1111122222');
|
|
if (this.$route.query.hasOwnProperty("from")) {
|
|
this.$router.replace({
|
|
path: this.$route.query.from
|
|
})
|
|
} else {
|
|
this.$router.replace("/")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const My = {
|
|
template: `<div>我的页面</div>`
|
|
}
|
|
|
|
const NotFound = {
|
|
template: `<div>404页面</div>`
|
|
}
|
|
|
|
|
|
const routes = [
|
|
{
|
|
name: 'error',
|
|
path: '*',
|
|
component: NotFound,
|
|
meta: {
|
|
isLogin: false
|
|
}
|
|
// redirect: "/"
|
|
},
|
|
{
|
|
name: 'home',
|
|
path: '/',
|
|
component: Home,
|
|
meta: {
|
|
isLogin: false,
|
|
title: '首页'
|
|
}
|
|
},
|
|
{
|
|
name: 'info',
|
|
path: '/info',
|
|
component: Info,
|
|
meta: {
|
|
isLogin: false,
|
|
title: '详情'
|
|
}
|
|
},
|
|
{
|
|
name: 'login',
|
|
path: '/login',
|
|
component: Login,
|
|
meta: {
|
|
isLogin: false,
|
|
title: '登录'
|
|
},
|
|
beforeEnter: (to, from, next) => {
|
|
if (localStorage.getItem("token") != null) {
|
|
history.back();
|
|
} else {
|
|
next();
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'my',
|
|
path: '/my',
|
|
component: My,
|
|
meta: {
|
|
isLogin: true,
|
|
title: '我的'
|
|
}
|
|
},
|
|
]
|
|
|
|
const router = new VueRouter({
|
|
mode: "hash",
|
|
linkExactActiveClass: 'active',
|
|
routes
|
|
});
|
|
|
|
// 实现页面的权限控制（有些页面需要登录才可以访问）
|
|
router.beforeEach((to, from, next) => {
|
|
|
|
document.title = to.meta.title
|
|
|
|
// 判断你要访问的页面是否需要登录，如果需要登录
|
|
// 再判断用户是否登录
|
|
|
|
|
|
// 需要等
|
|
if (to.meta.isLogin) {
|
|
// 登录过了
|
|
if (localStorage.getItem("token") != null) {
|
|
next();
|
|
} else {
|
|
next({
|
|
path: '/login',
|
|
query: {
|
|
from: to.fullPath
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
next();
|
|
}
|
|
|
|
})
|
|
|
|
const app = new Vue({
|
|
router,
|
|
el: "#app"
|
|
})
|
|
|
|
// 现在，应用已经启动了！
|
|
|
|
|
|
// vue-router
|
|
// hash http://www.test.com/#/info
|
|
|
|
// history
|
|
// http://www.test.com/car
|
|
|
|
|
|
// 页面传参方式
|
|
// 1: query
|
|
// http://www.test.com/info?id=1&page=2
|
|
|
|
// 2: params
|
|
// http://www.test.com/car/1/2
|
|
</script>
|
|
|
|
</html> |