98 lines
2.1 KiB
HTML
98 lines
2.1 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>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
<h1>Hello App!</h1>
|
|
<p>
|
|
<router-link to="/">首页</router-link>
|
|
<router-link to="/my">我的</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 } }">
|
|
|
|
{{ item.title }}
|
|
</router-link>
|
|
</ul>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
newList: [
|
|
{ id: 1, title: '新闻1' },
|
|
{ id: 2, title: '新闻2' },
|
|
{ id: 3, title: '新闻3' },
|
|
]
|
|
}
|
|
},
|
|
}
|
|
|
|
const Info = {
|
|
template: `
|
|
<div class="info">详情</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
id: null
|
|
}
|
|
},
|
|
created() {
|
|
this.id = this.$route.query.id
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
console.log("使用参数：",this.id," 发送ajax请求获取数据");
|
|
}
|
|
}
|
|
}
|
|
|
|
const My = {
|
|
template: `
|
|
<div class="my">我的</div>
|
|
`
|
|
}
|
|
|
|
const routes = [
|
|
{ path: '/', component: Home },
|
|
{ path: '/info', component: Info },
|
|
{ path: '/my', component: My },
|
|
]
|
|
|
|
const router = new VueRouter({
|
|
routes
|
|
})
|
|
|
|
const app = new Vue({
|
|
el: '#app',
|
|
router
|
|
})
|
|
|
|
</script>
|
|
|
|
</html>
|