vue学习之Vue-Router用法实例分析


Posted in Javascript onJanuary 06, 2020

本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考,具体如下:

Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击<router-link>它可以在<router-view>中将相应的组件渲染出来。

1、使用vue-router的步骤

//1、创建路由组件
  const Link1={template:'#link1'};
  const Link2={template:'#link2'};
  const Link3={template:'#link3'};
  //2、定义路由映射
  const routes=[
    {
      path:'/link1',       //定义相对路径
      component:Link1,      //定义页面的组件
      children:[
        {
          path:'intro',      //子路由/link1/intro
          component:{template:'#ariesIntro'},
          name:'ariesIntro',    //为路由命名
        },
        {
          path:'feature',
          component:{template:'#ariesFeature'},
        },
        {path:'/',redirect:'intro'}
      ]
    },
    {path:'/link2',component:Link2},
    {path:'/link3',component:Link3},
    {path:'/',redirect:'/link1'}        //配置根路由,使其重定向到/link1
  ];
  //3、创建router实例
  const router = new VueRouter({
    routes                   //缩写,相当于 routes: routes
  });
  // 4、 创建和挂载根实例。
  const app = new Vue({
    router
  }).$mount('#app');              //挂载到id为app的div

注意:要设置根路由,页面加载完成后默认显示根路由,否则将什么也不显示。

在页面中调用路由接口,<router-link> 默认会被渲染成一个 `<a>` 标签,点击后在<router-view>渲染指定模板

<div class="col-lg-offset-2 col-lg-2">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <router-link class="list-group-item" :to="{name:'ariesIntro'}">白羊座</router-link>
    <router-link class="list-group-item" to="/link2">处女座</router-link>
    <router-link class="list-group-item" to="/link3">金牛座</router-link>
  </div>
  <div class="col-lg-6">
    <div class="panel">
      <div class="panel-body">
        <!-- 路由出口,路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
      </div>
    </div>
  </div>

2、嵌套路由

通过每个路由内的children数组属性可以为每个路由再配置子路由,子路由的路径是基于父路由目录下的,默认路径会进行叠加。例如上面再link1中添加intro与feature两个子路由,在link1模板中使用两个子路由:

<template id="link1">
    <div>
      <h3>白羊座</h3>
      <ul class="nav nav-tabs">
        <li class="active">
          <router-link to="/link1/intro">简介</router-link>
        </li>
        <li><router-link to="/link1/feature">特点</router-link></li>
      </ul>
      <div class="tab-content">
        <router-view></router-view>
      </div>
    </div>
  </template>

最终效果如图:

vue学习之Vue-Router用法实例分析

3、动态路由

在路由路径中绑定变量,使其根据不同的变量值跳转到不同页面,例如将path:"goods/:goodsId",假如当goodsId为15时,就会路由到/goods/15页面。

4、编程路由

通过js代码控制路由页面的跳转与传值。例如给button绑定事件jump,在methods内实现:

jump(){
  this.$router.push('/cart?goodsId=123')
}

页面跳转到根下的cart目录,并且传递参数goodsId,值为123。在cart页面通过$route.query接收参数,直接在页面内使用:

注意:区分跳转是$router,接收参数是$route

<span>商品ID:{{$route.query.goodsId}}</span>

也可以指定页面向前向后跳转:this.$router.go(2),向前跳转两步 ,向后跳转一步go(-1)。

5、命名路由

当路由路径过长时,也可以用name属性为路径命名,在<router-link>中使用动态绑定:to="{name:'路径名'}"访问。例如白羊座的链接上使用 :to="{name:'ariesIntro'}",可直接跳转到link1下的Intro页面。

还可以对视图进行命名,将组件渲染到指定视图位置,例如在父组件中有一个默认视图与两个命名视图一左一右:  

<router-view></router-view>
<router-view class="left" name="cartview"></router-view>
<router-view class="right" name="imgview"></router-view>

在根路由中设置其组件components,将默认视图渲染为GoodsList,左边cartview视图渲染为Cart组件,右边imgview渲染为Image组件:

new Router({
 routes: [
  {
   path: '/',
   components:{
    default:GoodsList,
    cartview:Cart,
    imgview:Image
   }
}

结果如下:

vue学习之Vue-Router用法实例分析

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
微信小程序实现评论功能
Nov 28 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 #Javascript
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
JS实现音乐导航特效
Jan 06 #Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 #Javascript
You might like
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP多文件上传实例
2015/07/09 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
再谈javascript原型继承
2014/11/10 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
微信小程序实现tab页面切换功能
2018/07/13 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python文件去除注释的方法
2015/05/25 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
超市中秋节活动方案
2014/02/12 职场文书
赔偿协议书范本
2014/04/15 职场文书
拓展策划方案
2014/06/03 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL