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. 0925CSP-S模拟测试赛后总结

    献上了自己的第二次爆零. 最近考试持续低迷.受同桌影响是一方面,自己的状态不行也是一方面,根本还是实力不行. 昨天T1是签到题.然而并没有发现这个事实.并不会打…… 无意围观同桌秒切T1,秒过样例,长 ...

  2. platform模块和ctypes模块

    一.ctypes模块 Python 的 ctypes 要使用 C 函数,需要先将 C 编译成动态链接库的形式,即 Windows 下的 .dll 文件,或者 Linux 下的 .so 文件.先来看一下 ...

  3. hysbz3676 回文串 回文自动机

    回文自动机模板题 头铁了一下午hdu6599,最后发现自己的板有问题 先放这里一个正确性得到基本确认的板,过两天肝hdu6599 #pragma GCC optimize(2) #include< ...

  4. Django之跨表查询——正反向查询(ManyToManyField)

    1.多对多查询:涉及到两张表以上的查询. author_obj = models.Author.objects.first() print(author_obj.name) # 查询金老板写过的书 r ...

  5. winform程序捕获全局异常，对错误信息写入日志并弹窗

    使用场景:在winform程序中如果没对方法进行try catch操作,若方法内出错,则整个程序报错并退出,如下图 如果程序已在客户手中,若没对错误的详细信息进行拍照,我们则不知道错误原因是什么.我们 ...

  6. 使用CEfSharp之旅（1） 加载网络页面

    原文:使用CEfSharp之旅(1) 加载网络页面 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https://blog.csdn ...

  7. sql server2014显示sa无法登录的错误

    博主用的是sql serser2014,不过这个问题的方法也适用于2012等其他版本. 当用sa登录的时候,提示如下错误: A connection was successfully establis ...

  8. java_网络编程之BS(web案例)

    package BsServersocket; import java.io.*; import java.net.ServerSocket; import java.net.Socket; publ ...

  9. 如何在安装了Owin 2.X版本的项目中正确安装SignalR 2.2.1

    以安装了Owin2.1.0版本为例 1打开NuGet程序包管理控制台 2输入 Install-Package Microsoft.AspNet.SignalR -Version 2.2.1 2输入 I ...

  10. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...