vue-router 路由嵌套
App.vue
<template><div id="nav">
<!-- 导航 -->
<router-link to="/" active-class="current" replace>Home</router-link> |
<router-link to="/about" active-class="current" replace>About</router-link> |
<router-link to="/test1_bak">Test1_bak</router-link> |
<router-link to="/test1">Test1</router-link> |
<router-link to="/test2">Test2</router-link> |
<router-link :to="'/test3/'+test3_id">Test3</router-link> |
<router-link to="/test4">Test4</router-link>
</div>
<!-- 路由出口 -->
<router-view/>
</template>
<script>
import {ref} from "vue";
export default {
setup(){
const test3_id = ref('001')
return{
test3_id
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 10px;
background-color: lightskyblue;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
/* 默认选中样式类 */
#nav a.router-link-exact-active {
color:orangered;
}
.current{
font-size: 24px;
font-weight: bolder;
}
</style>
Test4.vue
<template><div id="test4_body">
<div id="header"><h1>上标题</h1></div>
<div id="body">
<div id="navl">
左导航
<div>
Test4
<div>
<router-link :to="{path:'/test4/test4-1'}">Test4_1</router-link>
<br/>
<router-link :to="{path:'/test4/test4-2'}">Test4_2</router-link>
</div>
</div>
</div>
<div id="main">
中内容
<router-view></router-view>
</div>
<div id="navr">右导航</div>
</div>
<div id="footer"><p>下版权</p></div>
</div>
</template>
<script>
export default {
name: 'Test4',
setup(){
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* CSS Document */
/**{*/
/* margin:0;*/
/* padding:0;*/
/*}*/
/*body{*/
/* margin:10px;*/
/*}*/
#test4_body{
margin:0;
padding:0;
/*margin:10px;*/
/*width:600px;*/
/*height: 100%;*/
/*margin:0 auto;*/
/*height:400px;*/
height:auto;
min-height:500px;
/*width:800px;*/
background:#bbeeeb;
margin:0 auto;
}
#header{
border:1px solid black;
/*width:600px;*/
height:60px;
margin:0 auto;
margin-bottom:10px;
}
#header h1{
height:60px;
line-height:60px;
font-size:16px;
text-align:center;
}
#body{
/*width:600px;*/
margin:0 auto;
}
#navl{
border:1px solid black;
width:150px;
height:auto;
float:left;
margin-bottom:10px;
background:lightcyan;
overflow: auto;
}
#main{
border:1px solid black;
/*width:294px;!*边框也算一个像素*!*/
width: auto;
min-width: 300px;
height:auto;
float:left;
margin-bottom:10px;
background:lightblue;
}
#navr{
border:1px solid black;
/*width:150px;*/
/*height:500px;*/
float:right;
margin-bottom:10px;
background:lightyellow;
}
#footer{
border:1px solid black;
/*width:600px;*/
height:60px;
line-height:60px;
margin:0 auto;
text-align:center;
clear:both;
}
</style>
Test4-1.vue
<template><div id="test4-1">
Test4-1
</div>
</template>
<script>
export default {
name: 'Test4-1',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#test3_news{
width: 450px;
height: 600px;
background-color: skyblue;
}
</style>
Test4-2.vue
<template><div id="test4-2">
Test4-2
</div>
</template>
<script>
export default {
name: 'Test4-2',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#test3_news{
width: 450px;
height: 600px;
background-color: skyblue;
}
</style>
index.js
//引入import { createRouter, createWebHashHistory } from 'vue-router'
// import Home from '../views/Home.vue'
// import Test3 from '../views/Test3.vue'
//路由懒加载
const Home = () => import('../views/Home.vue');
const Test3 = () => import('../views/Test3.vue');
const Test4 = () => import('../views/Test4.vue');
const Test4_1 = () => import("../components/Test4-1");
const Test4_2 = () => import("../components/Test4-2");
//创建路由对象
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
//路由重定向
{
path: '/home',
redirect:'/'
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test1_bak',
name: 'Test1_bak',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test1_bak.vue')
},
{
path: '/test1',
name: 'Test1',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test1.vue')
},
{
path: '/test2',
name: 'Test2',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test2.vue')
},
{
path: '/test3/:id',
name: 'Test3',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Test3
},
{
path: '/test4',
redirect: '/test4/test4-1',
name: 'Test4',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Test4,
children:[
{path:'test4-1',component:Test4_1},
{path:'test4-2',component:Test4_2}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
linkActiveClass:'current',
routes
})
//导出路由对象
export default router
以上是 vue-router 路由嵌套 的全部内容， 来源链接： utcz.com/z/380229.html
