一、 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. 如何设置python的编码格式为utf-8

    重装了系统(ubuntu 14.04)原来正常可用的OpenERP项目在切换到开发者模式的时候报错: UnicodeDecodeError: 'ascii' codec can't decode by ...

  2. Quotations中页面弹出的问题

  3. css断句 word-break

    word-break:break-all;word-wrap:break-word; 兼容IE6 火狐 chrome

  4. idea编译修改jdk版本

    由于项目需要,需要修改jdk的版本为1.8,这里记录一下修改的地方 1,项目的jdk版本 右键点击项目-> open module setting ->project,然后如图所示 2,在 ...

  5. tuning 03 Sizing the Share pool

    share pool : (组成) library cache: stores shared sql and pl/sql code (包含 statement text, parsed code, ...

  6. js移除某一类的div

    (转载)Javascript removeChild()不能删除全部子节点的解决办法   在Javascript中,只提供了一种删除节点的方法:removeChild().removeChild() ...

  7. 【vijos】1286 座位安排（状压dp）

    https://vijos.org/p/1286 这题好神不会捉... 首先我们知道所有情况有C(n*m, k)种,这个好搞.但是两两不相邻这个有点难搞.. 原来是状压dp..sigh. 设状态f[i ...

  8. 【BZOJ】3016: [Usaco2012 Nov]Clumsy Cows（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3016 之前yy了一个贪心,,,但是错了,,就是枚举前后对应的字符(前面第i个和后面第i个)然后相同答 ...

  9. LTP4J的使用BUG及解决方案

    子墨子曾经曰过,LTP是个好模型! car老师oneplus还有bhan开发的LTP4J是个很好的项目,使用起来也非常方便,下面贴几个常见的错误使用引起的bug的log分析 1.现象描述:程序中断,生 ...

  10. java网络编程5-SSL

    服务器端 System.out.println("等待客户端连接..."); File keyFile=new File("C:/Users/mu/Desktop/mu. ...