一、 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. 数据泵导出oracle 10g数据库

    首先连接sqlplus: sqlplus /nolog conn system/manager (或者连接其他用户) 1.创建whboa目录,用于存放导出的dmp文件(需要提前手动创建目录“E:\or ...

  2. ashx一般处理程序

    说明:    虽然通过标准的方式可以创建处理程序,但是实现的步骤比较复杂,为了方便网站开发中对处理程序的应用,从Asp.net 2.0开始,asp.net提供了称为一般处理程序的处理程序,允许我们使用 ...

  3. 关于TextView的一些初步解说

    Android里面的textview是一个相当重要的类.相信做安卓的开发人员在每一个应用里面都一定用到了它,而且它也是Button,EditTextView等子控件的父类. 对于View的流程:mea ...

  4. [转]使用TeamCity对项目进行可持续集成管理（一）

    一.可持续集成管理 持续集成,CI:即Continuous integration. 可持续集成的概念是基于团队(小组)协作开发而提出来的,为了提高团队开发效率与降低集成风险(早发现,早解决.晚发现, ...

  5. CentOS7.1 安装Liberty之环境准备（1）

    一.基础平台 1.一台装有VMware的windows系统(可联网) 2.CentOS 7.1 64bit镜像 二.最小化安装两台CentOS 7.1 的虚拟机controller.compute1, ...

  6. 1、Android自己的下拉刷新SwipeRefreshLayout

    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/ ...

  7. android--WaveView(波浪形View) 的实现记录

    背景 请假回家当伴郎,由于实在无聊,就写下了此篇博客!!按照惯例,先上动态图 怎么样!效果比较赞吧!!! 思路 当我第一次看见这个效果的时候,我的第一个想法是:如果是静态的时候是什么样子的!好,再来张 ...

  8. 将坐标转化为与X轴正半轴夹角模板

    //还需加PI 和 mabs 函数 double chg(double x,double y) { double tmps; )<1e-) { ) tmps=90.0; else tmps=27 ...

  9. AngularJS 讲解,二 模块

    AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表. angular.mo ...

  10. 用RSS订阅微信公众号

    现在用RSS的人应该不多了,不过还是写一下吧. 一.付费服务:今天看啥 1.付费原因: 目前,网上几乎没有免费的用RSS订阅微信公号的方法,所以我推荐的是付费方法: 具体使用的服务是今天看啥,服务还是 ...