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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
js绘制一条直线并旋转45度
Aug 21 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
php数据序列化测试实例详解
2017/08/12 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python中zip和unzip数据的方法
2015/05/27 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
django的model操作汇整详解
2019/07/26 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
大学辅导员事迹材料
2014/02/05 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
小学新学期寄语
2014/04/02 职场文书
大气污染防治方案
2014/05/19 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL