<!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>
<script src="../vue.js"></script>
<script src="../vue-router_3.0.2.js"></script>
<style>
#app {
width: 1400px;
height: 700px;
border: 5px solid pink;
display: flex;
}
#app>div {
height: 700px;
border: 2px solid black;
}
.main_left {
width: 300px;
text-align: center;
font-size: 25px;
}
.main_right {
width: 1100px;
}
.leader_top {
display: flex;
justify-content: space-around;
height: 100px;
border: 1px solid yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<div class="main_left">
<p><router-link :to="{name:'index'}">主页</router-link></p>
<p><router-link to="/leader">成为团长</router-link></p>
<p><router-link to="/about">关于</router-link></p>
<p><router-link to="/order">我要下单</router-link></p>
</div>
<div class="main_right">
<router-view></router-view>
</div>
</div>
<script>
let one = {
props: ["id", "user", "age"],
template: `
<div>
步骤id为:{{id}},用户名为:{{user}},用户年龄:{{age}}
</div>
`,
mounted() {
console.log(this);
}
}
let zhuye = {
data() {
return {}
},
template: `
<div>
欢迎光临!!!来自于:{{from}}
</div>
`,
props: ["from"]
}
let about = {
data() {
return {}
},
template: `
<div>
关于
<button @click="toShou">跳转到首页</button>
</div>
`,
methods: {
toShou() {
this.$router.push({ path: "/zhuye", query: { from: "关于" } });
// this.$router.push("/zhuye");
// this.$router.replace("/zhuye");
}
}
}
let order = {
data() {
return {}
},
template: `
<div>
我要下单
<button @click="goBack">后退</button>
</div>
`,
methods: {
goBack() {
// this.$router.go(0);
// this.$router.back();
this.$router.forward();
}
}
}
let leader = {
data() {
return {}
},
template: `
<div class="leader">
<div class="leader_top">
<p><router-link :to="{name:'one',params:{id:1},query:{user:'张三',age:18}}">第一步</router-link></p>
<p><router-link to="/leader/2?user=李四&age=19">第二步</router-link></p>
<p><router-link to="/leader/3?user=王五&age=20">第三步</router-link></p>
</div>
<router-view></router-view>
</div>
`
}
const router = new VueRouter({
routes: [
{ path: "/", redirect: "/zhuye" },
{
path: "/zhuye", component: zhuye, name: "index",
props: route => ({
from: route.query.from
})
},
{ path: "/about", component: about },
{
path: "/leader",
component: leader,
children:
[
{
name: "one",
path: "/leader/:id",
component: one,
props: route => ({
id: route.params.id,
age: route.query.age,
user: route.query.user,
})
// props:true
/* props: {
user: '张安',
age: 18
} */
},
]
},
{ path: "/order", component: order },
]
})
const app = new Vue({
el: "#app",
data: {
myCom: "zhuye",
userlist: [{
id: 1,
name: '张三',
age: 10
},
{
id: 2,
name: '李四',
age: 20
},
{
id: 3,
name: '王五',
age: 30
},
{
id: 4,
name: '赵六',
age: 40
}
]
},
components: {
zhuye,
about,
order,
leader
},
router
});
</script>
<pre>
1.this.$router.push();
</pre>
</body>
</html>
Vue 编程路由导航
最新推荐文章于 2024-07-19 18:41:59 发布