1. 使用router-
< src=\"vue.js\"></ >
< src=\"vue-router.js\"></ >
<style>
.box {
width: 100px;
height: 100px;
background: green;
margin-right: 20px;
float: left;
}
.router- -active {
color: red;
}
</style>
</head>
<body>
<div id=\"div1\">
<!-- <router- class=\'box btn\' to=\"/a/56\">News</router- > -->
<router- class=\'box\' :to=\"{name:\'news\', params:{id:98}}\">news</router- >
<router- class=\'box btn\' to=\"/b\">Entertainment</router- >
<router- class=\'box btn\' to=\"/c\">Lifetime</router- >
<router-view></router-view>
内容
</div>
< >
let router = new VueRouter({
routes: [{
path: \'/a/:id\',
name: \'news\',
component: {
template: \'<div>{{$route.params.id}}</div>\'
}
},
{
path: \'/b\',
name: \'entertainment\',
component: {
template: \'<div>bbb</div>\'
}
},
{
path: \'/c\',
name: \'lifetime\',
component: {
template: \'<div>ccc</div>\'
}
}
]
});
let vm = new Vue({
el: \'#div1\',
data: {},
router
})
</ >
</body>
2 js方式实现
< src=\"vue.js\"></ >
< src=\"vue-router.js\"></ >
</head>
<body>
<div id=\"div1\">
<!-- <router- class=\'nav\' to=\"/a/34\">新闻</router- >
<router- class=\'nav\' to=\"/b\">娱乐</router- >
<router- class=\'nav\' to=\"/c\">天气</router- > -->
<input type=\"button\" value=\'页面1\' @click=\'fn1()\'>
<input type=\"button\" value=\'页面2\' @click=\'fn2()\'>
<input type=\"button\" value=\'页面3\' @click=\'fn3()\'>
<router-view></router-view>
</div>
< >
let router = new VueRouter({
routes: [{
path: \'/a/:id\',
name: \'news\',
component: {
template: \'<div>{{$route.params.id}}</div>\'
}
},
{
path: \'/b\',
name: \'entertainment\',
component: {
template: \'<div>bbb</div>\'
}
},
{
path: \'/c\',
name: \'whether\',
component: {
template: \'<div>ccc</div>\'
}
},
]
})
let vm = new Vue({
el: \'#div1\',
router,
methods: {
fn1() {
//this.$router.push(\'/a/19\');
this.$router.push({
name: \'news\',
params: {
id: 12
}
});
},
fn2() {
this.$router.push(\'/b\');
},
fn3() {
this.$router.push(\'/c\');
}
}
})
</ >
继续阅读与本文标签相同的文章
-
Hitachi Vantara推出AI驱动的数据中心运营解决方案
2026-05-18栏目： 教程
-
湖北发力“5G”：天时地利人和
2026-05-18栏目： 教程
-
云原生技术之Docker入门
2026-05-18栏目： 教程
-
点我达与满电未来达成合作协议
2026-05-18栏目： 教程
-
光明日报：聚集高端产业 加速双向开放
2026-05-18栏目： 教程