1.vue-router的基本使用

1>安装vue-rouder路由模块

　<script src="js/vue-2.4.0.js"></script>
   <script src="js/vue-router v3.1.3.js"></script>

2>创建一个VueRouter对象

var routerObj = new VueRouter({

                //routers 代表router对象中路由的匹配规则

                //参数1：path，表示监听哪一个地址

                //参数2：表示如果参数1监听到了，则展示component对应的组件

                //component参数 必须是一个组件模板对象，而不能是组件模板

                routes: [{

                        path: '/',

                        redirect: '/login'

                    }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事

                    {

                        path: '/login',

                        component: login

                    },

                    {

                        path: '/register',

                        component: register

                    },

                ],
　　　　　　　　　　//修改默认的style样式类

                linkActiveClass:'myActive'

            })

3> 将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件

var vm = new Vue({

                el: '#app',

                data: {},

                methods: {},

                //将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件

                router: routerObj

            });

4>在组件中渲染

<div id="app">

            <!--<a href="#/login">登录</a>

            <a href="#/register">注册</a>-->

            <!--router-link 默认渲染一个a标签 -->

            <router-link to="/login">登录</router-link>

            <router-link to="/register">注册</router-link>

            <router-view></router-view>

        </div>

2.一个基本的路由

<body>

        <div id="app">

            <!--<a href="#/login">登录</a>

            <a href="#/register">注册</a>-->

            <!--router-link 默认渲染一个a标签 -->

            <router-link to="/login">登录</router-link>

            <router-link to="/register">注册</router-link>

            <router-view></router-view>

        </div>

        <script>

            //创建一个vue的router对象

            var login = {

                template: '<h1>登录组件</h1>'

            }

            var register = {

                template: '<h1>注册组件</h1>'

            }

            //            Vue.component('login',{

            //                template:'<h3></h3>'

            //            });

            var routerObj = new VueRouter({

                //routers 代表router对象中路由的匹配规则

                //参数1：path，表示监听哪一个地址

                //参数2：表示如果参数1监听到了，则展示component对应的组件

                //component参数 必须是一个组件模板对象，而不能是组件模板

                routes: [{

                        path: '/',

                        redirect: '/login'

                    }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事

                    {

                        path: '/login',

                        component: login

                    },

                    {

                        path: '/register',

                        component: register

                    },

                ],

                linkActiveClass:'myActive'

            })

            var vm = new Vue({

                el: '#app',

                data: {},

                methods: {},

                //将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件

                router: routerObj

            });

        </script>

    </body>

vue.js_10_vue的路由的更多相关文章

  1. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  2. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  3. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  4. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  5. react router @4 和 vue路由 详解(六)vue怎么通过路由传参？

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  6. react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...

  7. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  8. vue 2.0 路由创建的详解过程

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

随机推荐

  1. 机器学习 101 Mahout 简介 建立一个推荐引擎 使用 Mahout 实现集群 使用 Mahout 实现内容分类 结束语 下载资源

      机器学习 101 Mahout 简介 建立一个推荐引擎 使用 Mahout 实现集群 使用 Mahout 实现内容分类 结束语 下载资源 相关主题   在信息时代,公司和个人的成功越来越依赖于迅速 ...

  2. echarts 默认柱状图每根柱子显示不同颜色（随机显示和定制显示）

    series: [{ name: '请求数', type: 'bar', //barGap: 60, barWidth: 140,//柱图宽度 //stack: 'sum',//堆叠效果 itemSt ...

  3. 树链剖分（模板） 洛谷P3384

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #d ...

  4. Vue .sync修饰符与$emit(update:xxx)写法问题

    在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...

  5. k8s 弹性伸缩

    k8s弹性伸缩,需要附加插件heapster 1.安装heapster监控 1:上传并导入镜像,打标签 ls *.tar.gz for n in `ls *.tar.gz`;do docker loa ...

  6. 11_springmvc之RESTful支持

    一.理解RESTful RESTful架构,就是一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越多网站的采用. RESTful(即Representational Sta ...

  7. pycharm新建ini文件或创建ini文件失败

    1.pycharm创建ini格式的文件,没有对应的 ini 文件类型-------需要更新 Ini 2.setting–>marketplace 搜索 Ini ,然后进行安装,重启pycharm ...

  8. <数据分析>初级入门

    1.何为数据分析? 数据分析是指用适当的统计方法对收集来的大量数据进行分析,将它们加以汇总和理解消化,以求最大化地开发数据的功能,发挥数据的作用. 直接的理解:提炼杂乱无章的数据背后的信息,总结出研究 ...

  9. Spring Cloud Alibaba发布第二个版本，Spring 发来贺电

    还是熟悉的面孔,还是熟悉的味道,不同的是,这次的配方升级了. 今年10月底,Spring Cloud联合创始人Spencer Gibb在Spring官网的博客页面宣布:阿里巴巴开源 Spring Cl ...

  10. Django之深入了解路由层

    目录 ORM表关系建立 一对一 一对多 多对多 Django 请求生命周期 url 路由层 路由匹配 无名分组 有名分组 反向解析 路由匹配条件无分组的情况的反向解析 无名分组情况的反向解析 有名分组 ...