千峰商城-springboot项目搭建-44-router介绍及示例

 路由router：是由vue官方提供的用于实现组件跳转的插件。基于vue。
 
1.路由插件的引用。
离线引用：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js"></script>
    </head>
    <body>
    </body>
</html>

 在线CDN：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 

 

路由使用案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{padding: 0px;margin: 0px;}
            ul{list-style: none;}
            li{display: inline;; float: left; margin-left: 15px; margin-bottom: 15px;}
            ul li a{text-decoration: none;color: brown; font-size: 18px; font-weight: bold;}
            ul li a:hover{color: orange;}
        </style>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js"></script>
    </head>
    <body>
        
        <div id="container">
            <div style="width: 100%; height: 120px; background: paleturquoise;">
                <table>
                    <tr>
                        <td><img src="img/2.jpg" height="115" style="margin-left: 100px;" /></td>
                        <td>
                            <ul>
                                <li><router-link to="/a">首页</router-link></li>
                                <li><router-link to="/b">Java</router-link></li>
                                <li><router-link to="/c">Html5</router-link></li>
                                <li><router-link to="/d">Python</router-link></li>
                            </ul>
                        </td>
                    </tr>
                </table>            
            </div>
            <div style="width: 100%; height: 544px; background: lavender;">
                <router-view></router-view>
            </div>
        </div>
        
        <script type="text/javascript">
            //vue的路由旨在为单页面应用开发提供便捷
            //1.定义链接跳转的模板（组件）
            const t1 = {template:`<p>index</p>`};
            const t2 = {template:`<p>java</p>`};
            const t3 = {template:`<p>html5</p>`};
            const t4 = {template:`<p>python</p>`};
            
            //2.定义路由
            const myrouter = new VueRouter({
                routes:[
                    {path:"/a",component:t1},
                    {path:"/b",component:t2},
                    {path:"/c",component:t3},
                    {path:"/d",component:t4},
            ]});
            
            //3.引用路由
            var vm = new Vue({
                el:"#container",
                router:myrouter
                
            });
        </script>
    </body>
</html>

 

 

 

 

 

 

 
posted @ 2022-07-12 11:22  临易  阅读(66)  评论(0)  编辑  收藏  举报