<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
<style>
a{
color: black;
}
.router-link-active{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/first">第一页</router-link>
<router-link to="/second">第二页</router-link>
<router-link to="/third">第三页</router-link>
<router-view></router-view>
</div>
<template id="fir">
<div>
<h1>第一页1</h1>
<h1>第一页2</h1>
<h1>第一页3</h1>
</div>
</template>
<template id="sec">
<div>
<h1>第二页1</h1>
<h1>第二页2</h1>
<h1>第二页3</h1>
</div>
</template>
<template id="thi">
<div id="ap">
<h1>第三页1</h1>
<router-link to="/course">第三页2</router-link>
<router-link to="/order">第三页3</router-link>
<router-view></router-view>
</div>
</template>
<template id="fou"><p>第三页里面1</p></template>
<template id="fiv"><p>第三页里面2</p></template>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//注册template
let Fir= Vue.component("first",{
template:"#fir"
});
let Sec= Vue.component("secon",{
template:"#sec"
});
let Tir= Vue.component("thir",{
template:"#thi"
});
let CourseList= Vue.component("four",{
template:"#fou"
});
let OrderList= Vue.component("five",{
template:"#fiv"
});
// 配置路由
let cc =[{ path: '/course', component: CourseList},
{path: '/order', component: OrderList}];
let route=[
{path:"/",redirect:"first"},
{path:"/first",component:Fir},
{path:"/second",component:Sec},
{path:"/third",component:Tir,
children: cc
}
];
let router= new VueRouter({
routes:route
});
new Vue({
el: "#app",
router
})
</script>
</body>
</html>
VUE 路由切换
Vue Router 实战
最新推荐文章于 2025-05-12 12:49:18 发布
扫一扫
6141
到【灌水乐园】发言
