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. 概率dp的迭代方式小结——zoj3329,hdu4089,hdu4035

    在推导期望方程时我们常常会遇到dp[i]和其他项有关联,那么这时候我们就难以按某个顺序进行递推 即难以通过已经确定的项来求出新的项 即未知数的相互关系是循环的 但是我们又可以确定和dp[i]相关联的项 ...

  2. [BJOI 2018]染色

    题意:求01成立. 并查集维护,记录一个变量判断决策. #include<bits/stdc++.h> using namespace std; #define int long long ...

  3. System.String.cs

    ylbtech-System.String.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5619 ...

  4. AutoMapper Profile用法

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using AutoMappe ...

  5. F - GCD - Extreme (II) UVA - 11426

    Given the value of N, you will have to find the value of G. The definition of G is given below:

  6. 4_2.springboot2.x配置之springmvc自动配置

    1.Spring MVC auto-configuration 查看官方文档: Spring Boot为Spring MVC提供了自动配置,适用于大多数应用程序. 自动配置在Spring的默认值之上添 ...

  7. 能量项链 /// oj23800

    题目大意: N( 4 ≤ N ≤ 100 ),表示项链上珠子的个数 第二行是N个用空格隔开的正整数,所有的数均不超过1000. 第 i 个数为第 i 颗珠子的头标记( 1 ≤ i ≤ N ), 当 1 ...

  8. 一个简单的基于Tornado二手房信息统计项目的开发实现

    Purpose 最近因为要买房子,扫过了各种信息,貌似lianjia上的数据还是靠点谱的(最起码房源图片没有太大的出入),心血来潮想着做几个图表来显示下房屋的数据信息,顺便练练手. 需求分析 1从li ...

  9. LinkedHashMap笔记

    一.最基本元素存储单元 /** * HashMap.Node subclass for normal LinkedHashMap entries. */ static class Entry<K ...

  10. 「题解」：[线性代数]：relays 奶牛接力跑

    问题: relays 奶牛接力跑 时间限制: 1 Sec  内存限制: 256 MB 题面 题目描述 FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼 ...