124 lines
3.0 KiB
HTML
124 lines
3.0 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 组件来导航. -->
|
|
<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> |