vue.js什么是路由以及如何进行路由?

vue.js什么是路由?如何进行路由?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

vue.js 里的路由概念

vue.js里的路由相当于就是局部刷新。点击左边的菜单,右边的内容在不刷新整个页面的情况下,进行局部刷新

vue-router.min.js

为了实现路由,需要一个额外的库: vue-router.min.js

路由代码讲解

<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/vue-router.min.js"></script>
<head>
    <style>
     
    a{
      text-decoration: none;
    }
    a.router-link-active{
    /*   color:blue; */
      background-color: lightGray;
    }
    div.menu{
        border:1px solid gray;
        float:left;
    }
    div.menu a{
        display:block;
    }
     
    div.workingRoom{
        margin-left:100px;
    }
     
    div#app{
        width:500px;
        padding:10px;
        margin:10px auto;
    }
    </style>
</head>
<div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链
            to 相当于就是 href
        -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>
     
    <div class="workingRoom">
        <!--
            点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
         -->
         <router-view></router-view>   
    </div>
 
</div>
<script>
    /*
    * 申明三个模板( html 片段 )
    */
    var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };
    /*
    * 定义路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user,没有这个就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    */
    new Vue({
        el:"#app",
        router
    })
 
</script>

更多web前端自学相关知识,请查阅 HTML中文网 !!

以上就是vue.js什么是路由以及如何进行路由?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏