vue-router 路由基础的详解


Posted in Javascript onOctober 17, 2017

vue-router 路由基础的详解

今天我总结了一下vue-route基础,vue官方推荐的路由。

一、起步

HTML

<div id="myDiv">
 <h1>简单路由</h1>
 <router-link to="/foo">Go to foo</router-link>  
 <router-link to="/bar">Go to bar</router-link>  

// 渲染出口
 <router-view></router-view>
</div>

创建模板(组件):

(也可以用import 引入外部组件)

var foo={template:"<p>我是foo 组件</p>"};
  var bar={template:"<p>我是bar 组件</p>"};

组件注入路由:

var routes = [
   {path:'/foo',component:foo},
   {path:'/bar',component:b ar},
  ];

创建路由实例:

// 这里还可以传入其他配置
const router = new VueRouter({
   routes   // (缩写)相当于 routes: routes; 
  });

注意这里 routes 没有 ‘ r ' (不要写成 routers)

创建vue实例(并挂载实例)

var routerVue = new Vue({
   router
  }).$mount("#myDiv");

二、动态路由匹配

有时候我们需要的是模板结构一样,当时数据不一样,就相当于我们要把不同ID的登录用户连接到同一个页面,但要显示每个用户的独立信息,这时我们就用到了动态路由匹配。

动态路由主要用到了全局 $route.params 和路由的动态参数,全局route 的 params API 存储着 路由的所有参数,路径的参数用 “ : ”来标记:

HTML

<div id="myDiv">
// 点击对应链接时传入对应参数foo 和 bar
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</div>

JS

const User = {
   template:'<p>我的ID是{{ $route.params.id }}</p>',
// 在路由切换时可以观察路由
   watch:{
    '$route'(to,form){
     console.log(to); //要到达的
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
     {path:'/user/:id',component:User} // 标记动态参数 id
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

三、嵌套路由

1.嵌套路由讲的是我们可以在 <router-view>中去在渲染 <router-view> 这时要在配置路由时使用 children

例如:

HTML:

<div id="myDiv">
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</div>

JS:

const User = {
   template:'<div><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></div>',
   }

   // 子路由
   const userChildOne = {
    template:'<div>我是 userChildOne</div>'
   }
   const userChildTwo = {
    template:'<div>我是 userChildTwo</div>'
   }
  const router = new VueRouter({
   routes:[
     {path:'/user/:id',component:User,
      children:[ // 用法和参数和routes 一样
       {path:"/user/childone",component:userChildOne},
       {path:"/user/childtwo",component:userChildTwo}
      ]

     }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

四、命名路由

1.给路由命名指定路路由跳转,要用到参数name 和 v-bind

HTML:

<div id="myDiv">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
 <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link> 

  <router-view></router-view>
</div>

JS:

const User = {
   template:'<p>我的ID是{{ $route.params.userId }}</p>',
   watch:{
    '$route'(to,form){
     console.log(to);
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
   // name 一一对应上
     {path:'/user/:userId',name:"userOne",component:User},
     {path:'/user/:userId',name:"userTwo",component:User}
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

五、命名视图

1.给渲染视图 router-view 命名,来制定让那个视图渲染组件

HTML:

<div id="myDiv">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
 <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link> 
<!-- 视图命名 如果不写name 则为默认为 default-->
  <router-view></router-view>
  <router-view name='b'></router-view>
</div>

JS:

// 四个模板
  const UserA = {
   template:'<p>我是one,ID是{{ $route.params.userId }}</p>',
  }
  const UserB = {
   template:'<p>我是two,ID是{{ $route.params.userId }}</p>',
  }
  const UserC = {
   template:'<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>',
  }
  const UserD = {
   template:'<p>我是four,ID是{{ $route.params.userId }}</p>',
  }
  const router = new VueRouter({
   routes:[
   // name 一一对应上
     { 
      path:'/user/:userId',
      name:"userOne",
      components:{ // 注意这里为components 多个“ s ”
        default:UserA,
        b:UserB
      }
     },
     { 
      path:'/user/:userId',
      name:"userTwo",
      components:{
        default:UserD,
        b:UserC
      }
    }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

六、重定向 和 别名

重定向 和别名,首先我先来解释一下什么叫做重定向和别名

『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,

『别名』 /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
重定向主要用参数:redirect 而别名主要用到参数: alias

HTML:

<div id="myDiv">
 <h2>效果查看地址栏最后面的变化</h2>
 <router-link to="/User/foo">Go to foo</router-link> 
 <router-link to="/User/bar">Go to bar</router-link> 
 <router-link to="/User/Car">Go to bar</router-link> 

  <router-view></router-view>
</div>

JS:

const User = {
   template:'<p>我是同一个页面</p>',
  }
  const router = new VueRouter({
   mode:"history",
   routes:[
     { path:'/User/foo',component:User},
     { path:'/User/bar',redirect: '/User/foo',component:User},
     // 重定向的目标也可以是一个命名的路由:
     // 甚至是一个方法,动态返回重定向目标:

     // 别名设置
     { path:'/User/foo',alias: '/User/Car'}

   ]
  });

  var myVue = new Vue({ 
    router
  }).$mount("#myDiv")

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
如何抽象一个Vue公共组件
Oct 17 #Javascript
vue实现图书管理demo详解
Oct 17 #Javascript
基于Vue实现图书管理功能
Oct 17 #Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 #Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 #Javascript
node使用Koa2搭建web项目的方法
Oct 17 #Javascript
Node 自动化部署的方法
Oct 17 #Javascript
You might like
PHP网站提速三大“软”招
2006/10/09 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
Node.js实现发送邮件功能
2017/11/06 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
在Django中创建第一个静态视图
2015/07/15 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python实现猜拳小游戏
2020/04/05 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
音乐教学随笔感言
2014/02/19 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL