一、 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. java 检测字符串中文乱码

    1.检测是否为乱码 public static boolean isMessyCode(String strName) { Pattern p = Pattern.compile("\\s* ...

  2. Flow construction SGU - 176 有源汇有上下界最小流 二分法和回流法

    /** 题目:Flow construction SGU - 176 链接:https://vjudge.net/problem/SGU-176 题意: 有源汇有上下界的最小流. 给定n个点,m个管道 ...

  3. Oracle(2)数据库

    1.使用"||"连接多个字段,合并成一列 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFudGluZ21laQ==/font/5a ...

  4. 【C++自我精讲】基础系列五 隐式转换和显示转换

    [C++自我精讲]基础系列五 隐式转换和显示转换 0 前言 1)C++的类型转换分为两种,一种为隐式转换,另一种为显式转换. 2)C++中应该尽量不要使用转换,尽量使用显式转换来代替隐式转换. 1 隐 ...

  5. 【BZOJ】3479: [Usaco2014 Mar]Watering the Fields（kruskal）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3479 这个还用说吗.... #include <cstdio> #include < ...

  6. 使用StringTokenizer分解字符串

    Java切割字符串.一般使用substring.split.StringTokenizer来处理,前两种是String对象的方法,使用字符串能够直接处理,本文介绍下StringTokenizer的使用 ...

  7. 虚拟机（VMware Workstation）安装Ubuntu简易安装

    1.安装虚拟机 这里我安装的是:VMware Workstation v12.1.0 官方简体中文版 地址:http://www.3987.com/xiazai/1/12/37116.html#dow ...

  8. c++11小计

    [capture] (parameters) mutable -> return-type { statement } " (parameters)" 和 "-&g ...

  9. redo

    --创建redosize的视图create or replace view redo_size as select value from v$mystat, v$statname where v$my ...

  10. rabbitmq 3.6.11 centos 7 安装

    http://www.rabbitmq.com/releases/erlang/erlang-19.0.4-1.el7.centos.x86_64.rpm http://www.rabbitmq.co ...