• Vue.js路由


      有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面。

    又或者,一个页面中几个不同的画面来回点击切换,这两种情况都可以用vue router路由来解决。

    1,js的引用

    <script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>

     2,代码

      <body>
        <div id="app">
            <div>
                <!--
                    router-link to属性就是指向某个具体的链接,链接的内容会被渲染到router-view标签中
                    router-link会被渲染成a标签,例如第一个会变成<a href="#/first">第一个页面</a>,前面加了个#
                -->
                <router-link  to="/user">用户管理</router-link>
                <router-link  to="/company">商家管理</router-link>
    
            </div>
            <router-view></router-view>
        </div>
      </body>
    </html>
    <script>
        /*
        * 申明三个模板
        */
        var user = { template: '<p>用户信息</p>' };
        var company = { template: '<p>操作用户</p>' };
    
        /*
        * 定义路由,component属性是通过 Vue.extend() 创建的组件构造器,或者,只是一个组件配置对象。
        */
        var routes = [
            { path: '/user', component: user },
            { path: '/company', component: company },
    
        ];
        /*
        * 创建VueRouter实例
        */
        var router = new VueRouter({
            routes:routes
        });
        /*
        * 给vue对象绑定路由
        * .$mount("#app")手动挂载,用来延迟挂载,跟
        *  const app = new Vue({
        *   el:"#app"
        *   router
        * });
        * 效果是一样的
        */
        const app = new Vue({
            router
        }).$mount("#app");
    
    </script>

    效果:

      

    路由传参

    /*路径后添加参数*/   
    var routes = [
            { path: '/user/:id', component: user },
            { path: '/company', component: company },
        ];

      $route可以获取路由信息

    var user = { template: '<p>用户信息{{$route.params.id}}</p>' };

          

  • 相关阅读:
    【转】深入理解CSS定位中的偏移
    【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
    执行sql时出现错误 extraneous input ';' expecting EOF near '<EOF>'
    jquery操作select(增加,删除,清空)
    mybatis 错误CGLIB is not available
    spring事务不会进行回滚的情况
    Hive 存储类型 StoreType
    Sublimetext3安装Emmet插件步骤
    spring-mvc List及数组的配置接收
    solr 学习片段
  • 原文地址:https://www.cnblogs.com/tianranhui/p/9867651.html
Copyright © 2020-2023  润新知