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 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
借助云开发实现小程序短信验证码的发送
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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
django的ORM模型的实现原理
2019/03/04 Python
python assert的用处示例详解
2019/04/01 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
美国创意之家:BulbHead
2017/07/12 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
公司股权转让协议书
2014/04/12 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
英语课外活动总结
2014/08/27 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
运动会新闻报道稿
2015/07/22 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Python装饰器的练习题
2021/11/23 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis