本文介绍了如何在Vue.js应用中设置一级和二级路由。首先通过npm安装vue-router，然后导入并配置。接着展示了创建一级路由和二级路由的示例代码，鼓励读者进行实践操作。
1.下载vue-router npm install --save vue-router
2.先引入vue，再引入vue-router
3.示例代码如下：
一级路由：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
<div id="demo">
<!-- 6.设置路由跳转 -->
<router-link to="/index">index</router-link>
<router-link to="/phone">phone</router-link>
<router-link to="/about">about</router-link>
<router-link to="/user">user</router-link>
<!-- 5.定义路由出口 -->
<router-view></router-view>
</div>
<!-- 创建外部模板 -->
<template id="tema">
<div>
<p>indexindexindexindexindexindexindexindexindexindexindexindexindexindex</p>
</div>
</template>
<template id="temb">
<div>
<p>phonephonephonephonephonephonephonephonephonephonephonephonephonephone</p>
</div>
</template>
<template id="temc">
<div>
<p>aboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutabout</p>
</div>
</template>
<template id="temd">
<div>
<p>useruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruseruser</p>
</div>
</template>
<script>
// 1.创建模板
var tema={template:"#tema"};
var temb={template:"#temb"};
var temc={template:"#temc"};
var temd={template:"#temd"};
// 2.定义路由
var routes=[
{name:"index",path:"/index",component:tema},
{name:"phone",path:"/phone",component:temb},
{name:"about",path:"/about",component:temc},
{name:"user",path:"/user",component:temd}
]
//3. 创建路由实例
var router=new VueRouter({
routes
})
new Vue({
el:"#demo",
data:{},
methods:{},
// 4.挂载
router
})
</script>
</body>
</html>二级路由：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
<style>
a{
text-decoration: none;
}
.router-link-active{
color:red;
}
</style>
</head>
<body>
<div id="demo">
<foot></foot>
<!-- 5.设置路由出口 -->
<router-view></router-view>
</div>
<!-- 一级外部模板创建 -->
<template id="tema">
<div>
<p>首页</p>
</div>
</template>
<template id="temb">
<div>
<p>书影音</p>
<bottombar></bottombar>
<router-view></router-view>
</div>
</template>
<template id="temc">
<div>
<p>小组</p>
</div>
</template>
<template id="temd">
<div>
<p>市集</p>
</div>
</template>
<template id="teme">
<div>
<p>我的</p>
</div>
</template>
<!-- 二级外部模板创建 -->
<template id="ertema">
<div>
<p>电影</p>
</div>
</template>
<template id="ertemb">
<div>
<p>电视</p>
</div>
</template>
<template id="ertemc">
<div>
<p>综艺</p>
</div>
</template>
<template id="ertemd">
<div>
<p>读书</p>
</div>
</template>
<template id="erteme">
<div>
<p>音乐</p>
</div>
</template>
<template id="ertemf">
<div>
<p>同城</p>
</div>
</template>
<!-- 底部bar模板 -->
<template id="bottomtem">
<div>
<router-link to="/shuyingyin/ertema">电影</router-link>
<router-link to="/shuyingyin/ertemb">电视</router-link>
<router-link to="/shuyingyin/ertemc">综艺</router-link>
<router-link to="/shuyingyin/ertemd">读书</router-link>
<router-link to="/shuyingyin/erteme">音乐</router-link>
<router-link to="/shuyingyin/ertemf">同城</router-link>
</div>
</template>
<!-- 底部导航条 -->
<template id="foottem">
<div>
<!-- 设置路由跳转 -->
<router-link to="/index">首页</router-link>
<router-link to="/shuyingyin">书影音</router-link>
<router-link to="/group">小组</router-link>
<router-link to="/shiji">市集</router-link>
<router-link to="/mine">我的</router-link>
</div>
</template>
<script>
// 1.一级路由模板
var tema={template:"#tema"}
var temb={
template:"#temb",
// 封装底部bar组件
components:{
"bottombar":{
template:"#bottomtem"
}
}
}
var temc={template:"#temc"}
var temd={template:"#temd"}
var teme={template:"#teme"}
// 二级路由模板
var ertema={template:"#ertema"}
var ertemb={template:"#ertemb"}
var ertemc={template:"#ertemc"}
var ertemd={template:"#ertemd"}
var erteme={template:"#erteme"}
var ertemf={template:"#ertemf"}
// 2.创建路由规则
var routes=[
{name:"index",path:"/index",component:tema},
{
name:"shuyingyin",
path:"/shuyingyin",
component:temb,
children:[
{name:"ertema",path:"ertema",component:ertema},
{name:"ertemb",path:"ertemb",component:ertemb},
{name:"ertemc",path:"ertemc",component:ertemc},
{name:"ertemd",path:"ertemd",component:ertemd},
{name:"erteme",path:"erteme",component:erteme},
{name:"ertemf",path:"ertemf",component:ertemf}
]
},
{name:"group",path:"/group",component:temc},
{name:"shiji",path:"/shiji",component:temd},
{name:"mine",path:"/mine",component:teme},
// 重定向
{path:"/*",redirect:"/index"}
]
// 3.创建路由实例
var router=new VueRouter({
routes
})
new Vue({
el:"#demo",
data:{},
methods:{},
// 4.挂载
router,
components:{
"foot":{
template:"#foottem"
}
}
})
</script>
</body>
</html>
大家可以试试哦^^.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
