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. BZOJ 2660 (BJOI 2012) 最多的方案

    Description 第二关和很出名的斐波那契数列有关,地球上的OIer都知道:F1=1, F2=2, Fi = Fi-1 + Fi-2,每一项都可以称为斐波那契数.现在给一个正整数N,它可以写成一 ...

  2. 微软RPC官方教程

    http://msdn.microsoft.com/en-us/library/windows/desktop/aa379010(v=vs.85).aspx 注意:原文版本较老,我更新和改变了部分内容 ...

  3. System.Configuration.ConfigurationManager.cs

    ylbtech-System.Configuration.ConfigurationManager.cs 1.程序集 System.Configuration, Version=4.0.0.0, Cu ...

  4. CygWin、MinGw和Msys的区别

    做了6年的Windows C++,觉得已经没什么挑战力:而且Windows C++已经没落,不得不转Linux C++: 习惯了Windows的界面,习惯了傻瓜式的VS IDE,现在遇到Linux命令 ...

  5. import、export 和 export default

    ES6中 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等. 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | ...

  6. ideal的maven项目不小心remove module，如何找回

    找回方式: ideal的最右侧有个maven projects 点开后点击“+”,也就是Add Maven Projects,寻找不小心remove modules 的 子项目的pom文件所在的位置, ...

  7. 左神算法基础班5_1设计RandomPool结构

    Problem: 设计RandomPool结构 [题目] 设计一种结构,在该结构中有如下三个功能: insert(key):将某个key加入到该结构,做到不重复加入. delete(key):将原本在 ...

  8. File、FileFilter、递归初步

    java.io.File 文件和目录 路径名的抽象表示形式 文件:File 存储数据的 目录:Directory 文件夹 用来存储文件 路径:Path 定位具有平台无关性 在任意平台都可以使用 Fil ...

  9. <Django> MVT三大块之view(视图)

    1.视图简介 作用:接受web请求,返回web响应 本质:一个函数,定义在views.py文件中(定义在其他地方也行,约定俗成) 流程:(如果匹配不到,报一个404错误)-----结果返回http r ...

  10. <selenium>selenium基础操作

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.c ...