<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示路由切换组件</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/type/1">新闻</router-link>
<router-link to="/type/2">娱乐</router-link>
<router-link to="/about">关于我们</router-link>
<button @click="change">切换</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
let routesObj = [
{
path:'/',
component:{
template:'<div><h2>首页</h2></div>'
}
},
{
path:'/about',
component: {
template: '<div><h2>关于我们</h2></div>'
}
},
{
path:'/type/:id',
name:'type',
component:{
template:'<div>' +
'<h2>编号已接收{{$route.params.id}}</h2>'+
'<router-link to="more" append>显示全部</router-link>'+
'<router-view></router-view>'+
'</div>'
},
children:[
{
path:'more',
component:{
template:'<div>{{$route.params.id}}的详细信息</div>'
}
}
]
}
];
let routerKK = new VueRouter({
routes:routesObj
});
let vm = new Vue({
el:'#app',
router:routerKK,
methods:{
change:function () {
setTimeout(function () {
routerKK.push('/about');
setTimeout(function () {
routerKK.push({name:'type',params:{id:2}});
},2000)
},2000)
}
}
});
</script>
</body>
</html>
vue-例9-4演示路由切换组件.html
原创-
Vue3 实现一个简单的路由切换效果
Vue3 实现一个简单的路由切换效果
vue router -
vue-例9-1演示Vue路由.html
【代码】vue-例9-1演示Vue路由.html。
javascript vue.js 前端 html Vue -
vue-例9-2演示路由传递参数.html
【代码】vue-例9-2演示路由传递参数.html。
javascript vue.js 前端 html Vue -
vue-例9-3演示创建子路由.html
【代码】vue-例9-3演示创建子路由.html。
javascript vue.js 前端 html Vue -
vue-例9-5演示命名视图.html
【代码】vue-例9-5演示命名视图.html。
javascript 前端 vue.js html ide -
vue-例5-6演示嵌套组件.html
【代码】vue-例5-6演示嵌套组件.html。
vue.js javascript 前端 Vue html -
vue-例1-4演示MVVM模式.html
【代码】vue-例1-4演示MVVM模式.html。
javascript vue.js 前端 html MVVM -
vue-例4-3演示内联事件.html
【代码】vue-例4-3演示内联事件.html。
javascript vue.js 前端 html Vue -
vue-例3-9演示v-bind.html
【代码】vue-例3-9演示v-bind.html。
javascript vue.js 前端 html 动态绑定 -
vue-其他组件切换.html
【代码】vue-其他组件切换.html。
javascript vue.js 前端 Vue html -
vue-例2-4演示响应式声明渲染.html
【代码】vue-例2-4演示响应式声明渲染.html。
javascript vue.js 前端 html Vue -
vue-例4-6登录页面演示事件处理.html
【代码】vue-例4-6登录页面演示事件处理.html。
javascript vue.js 前端 html 登录页面 -
vue-例4-2演示方法事件处理.html
【代码】vue-例4-2演示方法事件处理.html。
javascript 前端 vue.js html Vue -
vue-例4-3演示内联事件2.html
【代码】vue-例4-3演示内联事件2.html。
javascript vue.js 前端 html 传参数 -
vue-例3-3演示迭代对象4.html
【代码】vue-例3-3演示迭代对象4.html。
javascript vue.js 前端 html 迭代 -
vue-例1-1演示创建vue实例.html
【代码】vue-例1-1演示创建vue实例.html。
vue.js javascript 前端 html Vue -
vue-其他组件切换2.html
【代码】vue-其他组件切换2.html。
javascript vue.js 前端 Vue html -
vue-例3-4演示v-for与template.html
【代码】vue-例3-4演示v-for与template.html。
前端 javascript html vue.js 数组 -
Python中list类型转换函数
Python坑又来了今天码哥为大家整理了平常被提问频率较高的一些问题1.我该下载哪个 Python 版本?去官网 http://python.org如果官网上的最新版本按钮没有替你自动下载,可从列表中选择 executable installer。如果你确信自己的系统是 64 位的,可以选 x86-64,否则选 x86 也没有问题。 我刚发现现在官网已经不再默认放置 2.
Python中list类型转换函数 python list转str python 提示文字2秒后清空 Python 官网