自定义路由

最新推荐文章于 2024-11-22 09:30:01 发布

雷大胖胖

最新推荐文章于 2024-11-22 09:30:01 发布

阅读量230

点赞数 2

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/m0_74795259/article/details/127830520

版权

1.1导入router的js库

<script src="assets/vue-router.min-2.7.0.js"></script>

1.2自定义模板

显示用户列表的模板

<div>

<h1>这是一个用户列表</h1>

<p>这个表你需要点想象力</p>

</div>

</template>

1.3添加用户的模板

<div>

<h1>这是一个添加用户的界面</h1>

</div>

1.4创建router对象

var userList={

template:'#template01',

}

var userAdd={

template:'#template02',

}

var r=new VueRouter(){

routes:[

{path:"/list",component:userList},

{path:"/add",componentAdd}

]

}

1.4在vue中通过router使用路由

new Vue({

el:'#app',

router:r

}),

1.5完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue的js库-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <!--导入路由的js库-->
    <script src="assets/vue-router.min-2.7.0.js"></script>
</head>
<body>
   <template id="template01">
       <div>
           <h1>这是一个用户列表</h1>
           <p>
           这个表你需要点想象力
           </p>
       </div>
   </template>
   <template id="template02">
        <div>
          <h1>这是一个用户添加页面</h1>
        </div>
   </template>
<div id="app">
    <router-link  to="users">用户列表</router-link>
    <router-link to="adds">用户添加</router-link>
    <router-view></router-view>
</div>
<script>
    //将用户列表模板注册到vue
    Vue.component('hello1', {
        template: '#template01'
    });

    //将用户添加模板注册到Vue
    Vue.component('hello2', {
        template: "#template02"
    });

    var userList={
        template:'#template01'
    }
    var userAdd={
        template:'#template02'
    }

    var  r=new VueRouter({
        routes:[
            {path:'/users',component:userList},
            {path:'/adds',component: userAdd}
        ]
    });
    new Vue({
        el: '#app',
        router:r
    });
</script>

</body>
</html>