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

2022-07-12 11:34:26 阅读：158 来源： 互联网

标签：vue const springboot 示例 44 js dist router 路由

路由router：是由vue官方提供的用于实现组件跳转的插件。基于vue。 1.路由插件的引用。离线引用：下载js文件：v4.x: https://unpkg.com/vue-router@4.1.2/dist/vue-router.global.js 　　　　　 v3.x: https://unpkg.com/vue-router@3.1.2/dist/vue-router.js

<!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>

标签：vue,const,springboot,示例,44,js,dist,router,路由
来源： https://www.cnblogs.com/lysboke/p/16469401.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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