一、 vue-router路由

　　1、简介

　　　　1、为什么要用vue-router

　　　　　　使用Vue.js开发SPA（Single Page Application）单页面应用

　　　　2、什么是单页面应用

　　　　　　根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

　　　　3、安装

　　　　　　bower info vue-router  //查看版本信息

　　　　　　cnpm install vue-router -S//安装

　　2、基本用法

　　　　1、布局

　　　　　　显示内容

　　　　2、配置路由

　　　　　　创建路由四步骤：定义组件》》》配置路由》》》创建路由实例》》》路由挂载

　　　　3、示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路由基本用法</title>

    <style>

        /* .router-link-active{

            font-size:20px;

            color:#ff7300;

            text-decoration:none;//去除下划线

        } */

        .active{

            font-size:20px;

            color:#ff7300;

            text-decoration:none;

        }

    </style>

    <script src="js/vue.js"></script>

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

</head>

<body>

    <div id="itany">

        <div>

            <!-- 使用router-link组件来定义导航，to属性指定链接url ，router-link组件最终会变成a标签-->

            <router-link to="/home">主页</router-link>

            <router-link to="/news">新闻</router-link>

        </div>

        <div>

            <!-- router-view用来显示路由内容 -->

            <router-view></router-view>

        </div>

    </div>

    <script>

        //1.定义组件

        var Home={

            template:'<h3>我是主页</h3>'

        }

        var News={

            template:'<h3>我是新闻</h3>'

        }

        //2.配置路由(路径和组件之间的关系)

        const routes=[  //routes是个数组，数组里的每一个对象都表示一个路由

            {path:'/home',component:Home}, //路径home对应的组件内容是Home

            {path:'/news',component:News},

            {path:'*',redirect:'/home'} //重定向，如果都找不到路由匹配就默认显示/home页面

        ]

        //3.创建路由实例

        const router=new VueRouter({   //VueRouter就是/vue-router.js里的

            routes, //简写，相当于routes:routes

            // mode:'history', //更改模式，默认是hash模式，默认模式每个路径前面会有个#号

            linkActiveClass:'active' //更新活动链接的class类名，后期好给链接改css样式

        });

        //4.创建根实例并将路由挂载到Vue实例上

        new Vue({

            el:'#itany',

            router //注入路由，相当于router：router

        });

    </script>

</body>

</html>

　　3、 路由嵌套和参数传递

　　　　1、传参的两种形式：

　　　　　　1、查询字符串：login?name=tom&pwd=123　　　　　　　　 {{$route.query}}

　　　　　　2、rest风格url：regist/alice/456　　　　  {{$route.params}}

　　　　2、总结：

　　　　　　1、字符串形式传参流程：组件中传参》》》 template模板中通过{{$route.query}},直接获取

　　　　　　2、rest风格传参流程：组件中传参》》》路由中指定》》》template模板中通过  {{$route.params}}获取

　　　　3、路由实例的方法

　　　　　　1、router.push()  添加路由，功能上与<route-link>相同，区别就在于改方法更灵活，可以自由的修改

　　　　　　2、 router.replace() 替换路由，不产生历史记录

　　　　4、路由结合动画

　　　　　　略

　　　　5、示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路由嵌套和参数传递</title>

    <link rel="stylesheet" href="css/animate.css">

    <style>

        .active{

            font-size:20px;

            color:#ff7300;

            text-decoration:none;

        }

    </style>

    <script src="js/vue.js"></script>

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

</head>

<body>

    <div id="itany">

        <div>

            <router-link to="/home">主页</router-link>

            <router-link to="/user">用户</router-link>

        </div>

        <div>

            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">//结合动画使用

                <router-view></router-view>

            </transition>

        </div>

        <hr>

        <button @click="push">添加路由</button>

        <button @click="replace">替换路由</button>

    </div>

    <template id="user">

        <div>

            <h3>用户信息</h3>

            <ul>

                <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>//参数传递方式1，下面是方式2

                <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>//<router-link默认被渲染成a标签，使用tag来指定被渲染成什么类型的标签

            </ul>

            <router-view></router-view>

        </div>

    </template>

    <script>

        var Home={

            template:'<h3>我是主页</h3>'

        }

        var User={

            template:'#user'

        }

        var Login={

            template:'<h4>用户登陆。。。获取参数：{{$route.query}},{{$route.path}}</h4>'//获取参数传递方式1的参数

        }

        var Regist={

            template:'<h4>用户注册。。。获取参数：{{$route.params}},{{$route.path}}</h4>'//获取参数传递方式2的参数

        }

        const routes=[

            {path:'/home',component:Home},

            {path:'/user',component:User,children:[{path:'login',component:Login},{path:'regist/:username/:password',component:Regist}]},//路由嵌套+参数传递方式2的参数接收

            {path:'*',redirect:'/home'}

        ]

        const router=new VueRouter({

            routes, //简写，相当于routes:routes

            linkActiveClass:'active' //更新活动链接的class类名

        });

        new Vue({

            el:'#itany',

            router, //注入路由

            methods:{

                push(){

                    router.push({path:'home'}); //添加路由，切换路由，实际上是做路由的跳转。

                },

                replace(){

                    router.replace({path:'user'}); //替换路由，没有历史记录，但是普通的router-link跳转是会有历史记录的。

                }

            }

        });

    </script>

</body>

</html>

vue-router路由器的使用的更多相关文章

  1. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  2. Vue躬行记（8）——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  3. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

  4. VUE的路由器的总结

    vue的路由器,我们在使用vue进行开发的时候,是必须用到的一个vue自带的组件,下面进行vue经常的操作的一些说明 1.vue-router的安装 在命令行里面使用 cnpm install vue ...

  5. Vue Router 使用方法

    安装 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指 ...

  6. 06 vue router(一)

    一.vue route是什么? Vue Router是vue.js官方的路由管理器.主要有以下几种功能 1.路由和视图表的配置.(已明白) 2.模块化和基于组件的路由配置.(已明白) 3.路由参数.查 ...

  7. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  8. vue router应用及总结

    编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...

  9. Vue Router基础

    路由 安装 vue-router 起步 <router-link to="/foo">Go to Foo</router-link> <router- ...

  10. Vue Router详细教程

    1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...

随机推荐

  1. 新版期货数据交换（FTD）协议报文分析

    因为需要开发模拟CTP后台服务,实现一键切换CTP,所以我们需要分析CTP报文.(基于FTD协议2004版改进)   网上公开的只能找到04年老版本,和现前报文格式出入较大.参考:http://www ...

  2. python的and和or优先级

    原题 输入一年份,判断该年份是否是闰年并输出结果.(编程题) 注:凡符合下面两个条件之一的年份是闰年. (1) 能被4整除但不能被100整除. (2) 能被400整除. 答案: def get_yea ...

  3. spring mvc 3.0 实现文件上传功能

    http://club.jledu.gov.cn/?uid-5282-action-viewspace-itemid-188672 —————————————————————————————————— ...

  4. C++ 抽象类一（多继承与赋值兼容性原则）

    //多继承与赋值兼容性原则 #include<iostream> using namespace std; class Point{ public: Point(){ a = ; b = ...

  5. 加速I/O的基本规则

    作为这个讨论的开始,这里有几个如何加速I/O的基本规则: 1. 避免访问磁盘 2. 避免访问底层的操作系统 3. 避免方法调用 4. 避免个别的处理字节和字符 很明显这些规则不能在所有的问题上避免,因 ...

  6. 【R】自定义描述统计函数-从均值到峰度偏度

    data_show<-function(x) { n<-length(x) m<-mean(x) v<-var(x) s<-sd(x) me<-median(x) ...

  7. 卡夫卡（kafka）

    1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有哪两个条件 ...

  8. ChemDraw在苹果电脑上能不能用

    很多ChemDraw 15.1 Pro用户都Windows操作系统用户,近年来随着苹果公司的影响力越来越大,使用苹果电脑的朋友越来越多.一些ChemDraw用户可能会使用苹果电脑,因此特别的关注在苹果 ...

  9. opencv2.4.9+VS2010配置

    opencv2.4.9 https://pan.baidu.com/s/15b5bEY65R4CptayEYVAG4A 安装包路径:D:\文件及下载相关\文档\Tencent Files\845235 ...

  10. js获取上个月的第一天和最后一天

    var now = new Date(); var fd = new Date(now.getFullYear(), now.getMonth()-1 ,1).toLocaleDateString() ...