theluyuan/vuekecheng06
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

嵌套路由

Browse Source
This commit is contained in:
theluyuan 2021-07-07 09:59:53 +08:00
parent d4d85a1f11
commit 8c8b2a14ef
3 changed files with 56 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/main.js
View File

@ -20,11 +20,25 @@ Vue.use(VueRouter) // vue 使用vuerouter
import bar from './pages/bar.vue' import bar from './pages/bar.vue'
import foo from './pages/foo.vue' import foo from './pages/foo.vue'
import index from "./pages/index.vue" import index from "./pages/index.vue"
// http://www.baidu.com/adsaw
// http 协议
// 127.0.0.1 ip or 域名
// www.baidu.com 域名 服务器
// /adsaw/asdxc url 网址路径
const routes = [ const routes = [
{ path: '/foo', component: foo }, { path: '/foo', component: foo },
{ path: '/bar', component: bar }, { path: '/bar', component: bar },
{ path: '/', component: index } {
path: '/index', component: index, children: [
{
path: 'foo', component: foo, children: [{
path: 'aaa', component: bar
}]
},
{ path: 'bar', component: bar },
]
}
] ]
// router 路由对象 // router 路由对象

1
src/pages/foo.vue
View File

@ -2,6 +2,7 @@
<div>这是foo <div>这是foo
<router-link to="/bar">到bar</router-link> <router-link to="/bar">到bar</router-link>
<button @click="getzhi">获取传值</button> <button @click="getzhi">获取传值</button>
<router-view></router-view>
</div> </div>
</template> </template>
<style scoped> <style scoped>

60
src/pages/index.vue
View File

@ -1,31 +1,47 @@
<template> <template>
<div> <div style="display:flex">
这是首页 <div class="menu">
<!-- 不能用a标签 --> <el-menu
<!-- <a href="/foo">到foo</a> --> default-active="2"
<!-- <router-link to="/foo">到foo</router-link> --> class="el-menu-vertical-demo menu"
<button @click="tiaozhuan">用js replace 跳转</button> @open="handleOpen"
<button @click="back">后退一步</button> @close="handleClose"
<router-link :to="{path:'/foo',query:{name:123,age:234,asda:1411}}">到foo</router-link> >
<el-menu-item index="2" @click="toindex">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="3" @click="tobar">
<i class="el-icon-document"></i>
<span slot="title">bar</span>
</el-menu-item>
<el-menu-item index="4" @click="tofoo">
<i class="el-icon-setting"></i>
<span slot="title">foo</span>
</el-menu-item>
</el-menu>
</div>
<router-view></router-view>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
tiaozhuan(){ toindex(){
// js this.$router.push this.$router.push("/index")
// js跳转 (*)
// 编程式导航
this.$router.push({path:'/foo',query:{name:123,age:234,asda:1411}})
// 用这个跳转的时候 当前页面不能被回退 在历史记录中消失了
//
// this.$router.replace({path:'/foo',query:{name:123,age:234,asda:1411}})
}, },
back(){ tobar(){
// 前进或后退多少步 正数是前进 负数是后退 this.$router.push("/index/bar")
// 如果后退 前进 数量不够 他就不会跳转 },
this.$router.go(99999); tofoo(){
} this.$router.push("/index/foo")
}
} }
},
};
</script> </script>
<style scoped>
.menu{
width:200px;
height: 100vh;
}
</style>