Vue-router的基本使用

最新推荐文章于 2024-07-21 00:03:27 发布

_风云_

最新推荐文章于 2024-07-21 00:03:27 发布

阅读量121

点赞数

分类专栏： vue 文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/zhuifengyx/article/details/107702168

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先先了解一下Vue-router的作用：在web开发当中难免会有一种导航栏的效果，当点击某个内容的时候（或者改动了url的地址），会有一块布局去显示相应的内容。而router便有这样的效果，通过去检测url地址的变动，从而无刷新的去实现展示相对应的这块功能

先拿看看一下实现的代码

<body>
    <div id="app">
        <!-- 模拟点击的内容块，即点击不同的链接可以显示不同发内容块。
            参数：/aindex表示的是显示的内容块（组件）所绑定的模板信息。为什么点击一个内容块就会显示
            相应的内容块呢，其中必有关联，而参数正是构建了这一种关联
             -->
        <a href="#/aindex">评论</a>
        <a href="#/bindex">关注</a>
        <a href="#/cindex">私信</a>
        <router-view></router-view>  <!--定义显示内容块的视图，此时无法决定这个块内容放在哪里-->
    </div>

     <!--定义模板，注意在此标签下只能有一个跟结点，定义模板的好处就类似于定义了一个方法，提高了内容块的
         复用率，大大减少了代码量，也提高了可读性        
         --> 
    <template id="tem1">
        <div class="panel">推荐评论</div>
    </template>
    <template id="tem2">
        <div class="panel">推荐关注</div>
    </template>
    <template id="tem3">
        <div class="panel">我的私信</div>
    </template>

    <script>
        //注册模板信息
        var tem11 = {
            template:"#tem1"
        }
        var tem22 = {
            template:"#tem2"
        }
        var tem33 = {
            template:"#tem3"
        }
        //绑定模板信息
        Vue.component('aindex', tem11);
        Vue.component('bindex', tem22);
        Vue.component('cindex', tem33);
        //指定路由规则，注意route routes  router的区别，在routes当中，其放的是路由条目，
        //是一个数组元素，里面放置的元素对象中包括：path：'url识别键',compoent：对应的内容块信息对象
        var routeRules =new VueRouter({
            routes: [
                { path:'/aindex',component: tem11 },
                { path:'/bindex',component: tem22 },
                { path:'/cindex',component: tem33 },
            ]
        });
        //实例化vue对象
        var wm = new Vue({
            el: '#app',
            //路由规则注册到实例当中
            router:routeRules
        });
    </script>
</body>

下面总结一下其用法：

1.引入vue.js 及vue-router.js文件，最好就是先测试一下引入的文件有没有问题（今天测试的时候出现VueRouter未定义的错误，排了半天的雷发现是引入的js文件有问题）