路由实验。页面布局如下图所示：第一次打开页面，显示一级目录（左边），右边为：欢迎来到南阳师范学院，点开“党务、校务公开”之后，显示内容后，点开二级目录显示如下内容：

最新推荐文章于 2024-10-07 09:24:46 发布

m0_52803264

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量99

点赞数 1

文章标签： elementui sass javascript css

本文链接：https://blog.csdn.net/m0_52803264/article/details/125191129

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            border-bottom:5px double black;
            color:red;
        }
        #app{
            border:black thin solid;
            width:200px;
            height:300px;
        }
        #two{
            border-bottom:thin solid black;  
            margin-top:20px;
        }
        #san{
            border:black thin solid;
            width:300px;
            height:300px;
            margin-left:200px;
        }
        #yi{
            float:left;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="yi">
            <div id="one"><router-link to="/"><p style="color:red;font-size:25px;">校园直达</p></router-link></div>
            <div id="two"><router-link to="/user">党务、校务公开</router-link></div>
            <div id="two">师院新闻网</div>
            <div id="two">网络资源中心</div>
            <div id="two">关于我们</div>
        </div>
        <div id="san">
            <router-view></router-view>
        </div>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script src="app_1.js"></script>
</body>
</html>

app_1代码如下：

var routes=[
    {
        path:'/',
        component:{
            template:'<div><h2>欢迎来到南阳师范学院！</h2></div>'
        }
    },
    {
        path:'/user',
        component:{
            template:'<div>党务、校务公开--<br><router-link to="/user/1">新闻1</router-link><br/><router-link to="/user/2">新闻2</router-link><router-view></router-view></div>'
        },
        children:[
            {
                path:'1',
                component:{
                    template:'<div>新闻1内容如下：</div>'
                }
            },
            {
                path:'2',
                component:{
                    template:'<div>新闻内容2如下：</div>'
                }
            },
        ]
    },
];

    var router=new VueRouter({
    routes:routes
});
new Vue({
    el:'#app',
    router:router
})

第一次打开页面，显示一级目录（左边），右边为：欢迎来到南阳师范学院！