<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<!--https://segmentfault.com/a/1190000012393587-->
<div id="app">
<p>
<ul>
<li @click="chuangCan(1234)"><router-link to="/qz">意向</router-link></li>
<li @click="hehe2" ><router-link to="/jn">特长</router-link></li>
<li @click="haha"><router-link to="/gz">经验</router-link></li>
<li><router-link to="/zw">评价</router-link></li>
<li> <router-link to="/jy">背景</router-link></li>
</ul>
</p>
<router-view></router-view>
<button @click="getFn">点击获取参数</button>
</div>
<template id="yiXiang">
<div>求职意向</div>
</template>
<template id="jiNeng">
<div>技能特长</div>
</template>
<template id="gongZuo">
<div>
<ul>
<li><router-link to="/gz/qzSon/234">云贷通</router-link></li>
<li><router-link to="/gz/jnSon">有数简查</router-link></li>
<li><router-link to="/gz/gzSon">最多跑一次</router-link></li>
<li><router-link to="/gz/zwSon">接口微服务</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<template id="ziWo">
<div>自我评价</div>
</template>
<template id="jiaoYu">
<div>教育背景</div>
</template>
<!--路由子模块-->
<template id="gongZuo1">
<div>《2323》</div>
</template>
<template id="gongZuo2">
<div>《2434》</div>
</template>
<template id="gongZuo3">
<div>《45454》</div>
</template>
<template id="gongZuo4">
<div>《6767676》</div>
</template>
<script>
const yiXiang = { template: '#yiXiang'};
const jiNeng = { template: '#jiNeng'};
const gongZuo = { template: '#gongZuo'};
const ziWo = { template: '#ziWo'};
const jiaoYu = { template: '#jiaoYu'};
const jiaoYuSon1 = { template: '#gongZuo1'};
const jiaoYuSon2 = { template: '#gongZuo2'};
const jiaoYuSon3 = { template: '#gongZuo3'};
const jiaoYuSon4 = { template: '#gongZuo4'};
const router = new VueRouter({
routes:[
{path:'',component:yiXiang},
{ path: '/qz/:sum', component: yiXiang},
{ path: '/jn/', component: jiNeng,name:'jiNeng2'},
{ path: '/gz', component: gongZuo,name:'gongZuo',
children: [
{ path: "/", component: jiaoYuSon1 },
{ path: "qzSon/:sum2", component: jiaoYuSon1 },
{ path: "jnSon", component: jiaoYuSon2 },
{ path: "gzSon", component: jiaoYuSon3 },
{ path: "zwSon", component: jiaoYuSon4 }
]
},
{ path: '/zw', component: ziWo},
{ path: '/jy', component: jiaoYu}
]
});
const app = new Vue({
methods:{
getFn:function () {
// let obj ={ path: 'yourPath',
// name: '张三',
// params: {
// name: 'name',
// dataObj: 1
// }
// };
// this.$router.push(obj);
// console.log(this.$router);
// console.log(this);
console.log(this.$route);
},
chuangCan:function (e) { /*方法1*/
this.$router.push({
path: `/qz/${e}`,
})
},
hehe2:function () { //方法2
this.$router.push({
path: 'jn',
query: {
id: '123'
}
})
},
haha:function () {
this.$router.push({ //方法3
name:'gongZuo',
path: 'gz', // 不要加“/”。
params: { //params只能用name来引入路由，
admin: '123',
name:'name'
}
})
}
},
router
}).$mount('#app')
//$route
// $router
// $route为当前router跳转对象里面可以获取name、path、query、params等
// $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
//传参的三种方式；
//1 在router-link父元素上定义事件传值，通过$router.push({path:路径})
//2，3$router上的params和query对象上
</script>
</body>
</html>