vue路由and组件操作

Posted 2022-05-11 zhangjiaqi123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue路由and组件操作相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <link rel="stylesheet" href="sass/element.css">
    <script src="C:\text\vue.js"></script>
    <script src="C:\text\vue-router.js"></script>
    <script src="C:\text\element.js"></script>
    <style>
        *
            list-style: none;
            margin: 0;
            padding: 0;

        
    .header
        height: 50px;
        background-color: blueviolet;
        text-align: center;
        font-size: 30px;
    
    .left
        float: left;
        width: 600px;
        height: 1000px;
        background-color: aqua;
        text-align: center;
        
    
    .table
        width: auto;
        height: 1000px;
        background-color: chocolate;

    
    .foodbox
        float: left;
        width: 6oopx;
        height: 1000px;
    
.food
     display: inline-block;
   width: 80px;
   height: 20px;
   text-align: center;
   border-radius: 20%;
    background-color: brown;
    margin-right:5 px;

    </style>
</head>
<body class="main">  
        <div id="demo-2" class="demo">
            <router-view></router-view>
             <router-view name="left"></router-view>
             <router-view name=‘table‘></router-view>

        </div>
        <template id=‘left‘>
                <div class=‘left‘>
              <router-link class =‘food‘ to=‘/food1‘>食物一</router-link> 
              <router-link class =‘food‘ to=‘/food2‘>食物二</router-link> 
              <router-link class =‘food‘ to=‘/food3‘>食物三</router-link> 
              <router-link class =‘food‘ to=‘/food4‘>食物四</router-link> 
              <router-link class =‘food‘ to=‘/food5‘>食物五</router-link> 
              <router-link class =‘food‘ to=‘/food6‘>食物六</router-link> 
              <router-view></router-view>
              </div>
         </template>
         <template id="table">
                <div class=‘table‘ >
                        <table>
                                <tbody >
                                  <tr>1</tr>
                                  <tr>this.$parent.mes</tr>
                                </tbody>
                          </table>

                </div>
         </template>
         <script>
             var header=
                 template:"<div class=‘header‘>这是一个头部</div>"
             
             var lefter=
                 template: "#left"
             
             var tabler=
                 template:"#table"

             
             var food1=
                 template:"<h1>苹果</h1>"
             
             var food2=
                 template:"<h1>香蕉</h1>"
             
             var food3=
                 template:"<h1>火龙果</h1>"
             
             var food4=
                 template:"<h1>葡萄</h1>"
             
             var food5=
                 template:"<h1>西瓜</h1>"
             
             var food6=
                 template:"<h1>橘子</h1>"
             
            var routerObj =new VueRouter(
                routes:
                [
                    path:‘/‘,//原始路由组件页面
                    components: 
                    
                       default: header,
                       left :lefter,
                       table:tabler
                       
                    ,
                    children:[//孩子路由
                         path:‘food1‘,component:food1,
                            path:‘food2‘,component:food2,
                           path:‘food3‘,component:food3,
                            path:‘food4‘,component:food4,
                            path:‘food5‘,component:food5,
                            path:‘food6‘,component:food6,
                        
                    ]

                
                 ]
            )
               var vm=  new Vue(
                el: ‘#demo-2‘,
                data: 
                    mes:"zhanghui",
                 items: [
                        message: ‘Foo‘,age:‘18‘,
                        message: ‘Bar‘, age:‘20‘,

    ]

                ,
                components: 
                 
                ,
                router:routerObj
              )
            
            
            
             
        </script>
       
    
</body>


</html>

以上是关于vue路由and组件操作的主要内容，如果未能解决你的问题，请参考以下文章

Vue路由守卫（全局路由守卫、路由独享守卫、组件内部守卫）

通过路由器将查询参数传递给vue组件