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. （转）Java ClassLoader详解

    转:http://java.chinaitlab.com/base/804400.html 类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态 ...

  2. spring源码读书笔记

    如果我们在web项目里面使用spring的话,通常会在web.xml里面配置一个listener. <listener> <listener-class> org.spring ...

  3. reboot与shutdown -r now 区别与联系（又收集了init和halt的小知识）

    在linux命令中reboot是重新启动,shutdown -r now是立即停止然后重新启动,都说他们两个是一样的,其实是有一定的区别的. shutdown命令可以安全地关闭或重启Linux系统,它 ...

  4. QT之QComboBox

    1.addItems需要注意的事项: 1.在QT中设置maxVisibleItems的值,设置Items的最大可显示的值.(一般默认为10) 2.在每次需要清除已经添加的tems的时候需要注意,ui. ...

  5. 第十五篇：java操作oracle踩坑之旅

    最近刚做完mysql的各种需求,项目要满足oracle数据库,于是走上了漫漫的踩坑之路,同行可以看看以免踩坑……第一条:oracle建表的时候不需要在建表sql语句后指定默认字符集 DEFAULT C ...

  6. vue打包后index.html界面报错

    vue项目完成后,打包放到服务器上,打开index.html页面时发现一片空白并且报错 很明显是js和css引用不到. 解决办法: 修改vue项目config文件夹下面的index.js,将asset ...

  7. Django杂篇(2)

    目录 Django杂篇(2) cookie与session cookie session django中间件 自定义中间件 跨站请求伪造(csrf) CSRF的解决方案 Django杂篇(2) 本文主 ...

  8. RunLoop运行循环机制

    http://www.jianshu.com/p/0be6be50e461 基本概念 进程 进程是指在系统中正在运行的一个应用程序,而且每个进程之间是独立的,它们都运行在其专用且受保护的内存空间内,比 ...

  9. OA系统和ERP系统的区别

    一.OA和ERP的区别 1.含义不同: OA指Office Automation,中文简称自动办公系统,帮助企业内部管理沟通的工具,比如新闻公告.内部沟通.考勤.办公.员工请假.审批流程等. ERP指 ...

  10. JS规则 较量较量(比较操作符) 两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)。【>; <; >=; <=; !=;==】

    较量较量(比较操作符) 我们先来做道数学题,数学考试成绩中,小明考了90分,小红考了95分,问谁考的分数高? 答: 因为"95 > 90",所以小红考试成绩高. 其中大于号& ...