102 lines
2.4 KiB
HTML
102 lines
2.4 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>Document</title>
|
|
<style>
|
|
.router-link-active {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
<h1>Hello App!</h1>
|
|
<p>
|
|
<router-link to="/index">首页</router-link>
|
|
<router-link to="/about">我的</router-link>
|
|
</p>
|
|
<router-view></router-view>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
|
|
<script>
|
|
const index = {
|
|
template: `
|
|
<ul>
|
|
<li @click="enterInfo(item.id)"
|
|
v-for="item,index in newsList">{{ item.title }}</li>
|
|
</ul>
|
|
`,
|
|
data() {
|
|
return {
|
|
newsList: [
|
|
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
|
|
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
|
|
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
enterInfo(id) {
|
|
this.$router.replace({
|
|
name: 'info',
|
|
query: {
|
|
id: id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
const info = {
|
|
template: `<div>info {{ id }}</div>`,
|
|
data() {
|
|
return {
|
|
id: null
|
|
}
|
|
},
|
|
created() {
|
|
this.id = this.$route.query.id
|
|
}
|
|
}
|
|
const about = { template: '<div>about</div>' }
|
|
|
|
const routes = [
|
|
{
|
|
path: '/',
|
|
redirect: "/index"
|
|
},
|
|
{ path: '/index', component: index },
|
|
{
|
|
path: '/info',
|
|
name: 'info',
|
|
component: info
|
|
},
|
|
{ path: '/about', component: about },
|
|
|
|
]
|
|
|
|
const router = new VueRouter({
|
|
routes,
|
|
// linkActiveClass: 'active'
|
|
})
|
|
|
|
router.beforeEach((to, from, next) => {
|
|
console.log("to: ", to);
|
|
console.log("from: ", from);
|
|
// next();
|
|
})
|
|
|
|
const app = new Vue({
|
|
el: '#app',
|
|
router
|
|
})
|
|
</script>
|
|
|
|
</html> |