一、 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. socket编程头文件分析

    在socket网络编程中经常用到一些宏定义.结构和函数,这些经常包含在相关的头文件中,使用时直接include相关头文件即可.下面简单描述下相关的一些结构及头文件. 1. sockaddr  / bi ...

  2. flutter 修改

    原来用的是tabviewer来写的,但是有点问题. 点到某一个tab,会导致加载前一个tab的数据,看到别人的文章keep tab的做法,写了 tabbar的控件. 我想了一把,直接换成了pagerv ...

  3. nginx中，$request_uri和$uri的区别

    nginx中,$request_uri和$uri的区别   $request_uri This variable is equal to the *original* request URI as r ...

  4. SSH初体验系列--Hibernate--3--单值与分页查询

    前言 查询可以按结果集分2类:单个结果 和 数组 ; 其中,返回数组,在这个 数据库数据量随随便便就能上几十万的互联网时代大背景下,常常需要做分页处理, 所以这里就说一下单值和分页, 算是对上一篇&q ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar (一)

    Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...

  6. CNN图像分割总结

    深度学习(三十三)CRF as RNN语义分割-未完待续 http://blog.csdn.net/hjimce/article/details/50888915 Fully Convolutiona ...

  7. javascript基本语法和变量（转）

    转载来自 阮一峰老师的文章,地址为:http://javascript.ruanyifeng.com/grammar/basic.html#toc0 1.1语句 JavaScript 程序的执行单位是 ...

  8. [Linux 学习] Centos 图形和命令行界面切换

    要想切换图形界面和命令行界面切换, 需修改一个文件... root 下, 到 /etc/inittab 修改 id:5:initdefault Linux系统有7个运行级别(runlevel): 运行 ...

  9. c++ 类声明

    class B; struct A { B* ptr; }; class B { public: }; int main() { ; } A中定义了B的指针,所以要声明class B,在定义处于不完整 ...

  10. angular-ui-bootstrap 日历控件国际化

    angularjs-angular-ui-bootstrap-changing-language http://stackoverflow.com/questions/19671887/angular ...