版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/81950102
1、把子路由容器放在home模板结构，<router-view></router-view>
<template id="home">
<div>
<h1>首页</h1>
<button @click="tap()">跳转到other</button>
<hr />
<ul>
<li v-for="(item,i) in arr"><router-link :to="'/detail/'+item.pid">{{item.pname}}</router-link></li>
</ul>
<hr />
<!--子路由容器-->
<router-view></router-view>
</div>
</template>2、改变路由规则为父子元素
// 路由规则定义
var routes=[
{path:'/home',component:Home,
children:[
{path:'/detail/:id',component:Detail}
]
},
{path:'/about',components:{default:About,'other':Other}},
{path:'/qita',name:'other',component:Other},
{path:'*',redirect:'/home'}
]3、此时点击后只能点击一次，原因是路由嵌套不能动态改变新得到的值（路由嵌套传值的弊端），这里解决方法是用watch(‘$route’(a,b){a为新传入的值，b为原来的值})监听，这里只用a值即可，a.params.id即为新传入的值，这时候a.params.id=_this.$route
var Detail={
template:'#detail',
data:function(){
return{
detail:''
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:_this.$route.params.id}
})
.then(function(data){
_this.detail=data.data.data.pdesc
})
},
watch:{
'$route'(a){
// console.log(a.params.id)
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:a.params.id}
})
.then(function(data){
_this.detail=data.data.data.pdesc
})
}
}
}完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue-router.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.router-link-active{
color: blue;
}
</style>
</head>
<body>
<div id="out">
<h1>路由</h1>
<!--导航标签-->
<router-link to="/home" tag="span">首页</router-link>
<router-link to='/about' tag="span">关于</router-link>
<router-link :to="{name:'other'}" tag="span">其他</router-link>
<!--路由容器-->
<router-view></router-view>
<router-view name="other"></router-view>
</div>
<template id="home">
<div>
<h1>首页</h1>
<button @click="tap()">跳转到other</button>
<hr />
<ul>
<li v-for="(item,i) in arr"><router-link :to="'/detail/'+item.pid">{{item.pname}}</router-link></li>
</ul>
<hr />
<!--子路由容器-->
<router-view></router-view>
</div>
</template>
<template id="about">
<div>
<h1>about</h1>
<!--<p>{{this.$route.params.id}}</p>-->
</div>
</template>
<template id="other">
<div>
<h1>.qita.</h1>
</div>
</template>
<template id="detail">
<div>
<h2>详情</h2>
<p>{{detail}}</p>
</div>
</template>
</body>
<script type="text/javascript">
var Home={
template:'#home',
data:function(){
return {
arr:[]
}
},
methods:{
tap(){
router.push('/other')
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/productlist.php"
})
.then(function(data){
// console.log(data.data.data)
_this.arr=data.data.data
})
}
}
var Detail={
template:'#detail',
data:function(){
return{
detail:''
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:_this.$route.params.id}
})
.then(function(data){
_this.detail=data.data.data.pdesc
})
},
watch:{
'$route'(a){
// console.log(a.params.id)
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:a.params.id}
})
.then(function(data){
_this.detail=data.data.data.pdesc
})
}
}
}
var About={
template:'#about'
}
var Other={
template:'#other'
}
// 路由规则定义
var routes=[
{path:'/home',component:Home,
children:[
{path:'/detail/:id',component:Detail}
]
},
{path:'/about',components:{default:About,'other':Other}},
{path:'/qita',name:'other',component:Other},
{path:'*',redirect:'/home'}
]
// 实例化路由对象
var router=new VueRouter({
routes:routes
})
var vm=new Vue({
el:'#out',
router:router
})
// 导航路由
// 编程路由
// 单容器路由
// 嵌套路由
// 路由params传参
</script>
</html>