详解vue路由


Posted in Javascript onAugust 05, 2020

前端路由和后端路由:

  • 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源
  • 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现

在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由

路由的使用

1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函数VueRouter

2.在new路由对象的时候可以传递一个配置对象,这个配置对象的route表示路由器的匹配规则

3.每个路由规则都是一个对象,这个规则对象身上必须有两个属性

  • 属性1 path表示监听哪个路由链接地址
  • 属性2 component,表示如果路由是前面匹配到的path,则展示component属性对应的组件,component属性值必须是一个组件模板对象,不能是组件的引用名称
var login={
      template:'<h2>登录</h2>'
    }
    var register={
      template:'<h2>注册</h2>'
    }
    var routerObj=new VueRouter({
      routes:[
        {path:'/login',component:login},
        {path:'/register',component:register}

      ]
    })

4.router:routerObj将路由规则对象注册到VM实例上,用来监听URL地址的变化,然后展示对应的组件

var vm=new Vue({
          el:'#div1',
          data:{
            
          },
          methods:{
            
            },
          router:routerObj  
          
        })

5.在控制的div中使用

<router-view></router-view>

6.在搜索栏输入对应的匹配规则,login

详解vue路由

7.使用vue官方提供的router-link元素使用,它默认渲染为一个a标签

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

路由重定向

1.设置一个默认展示组件,不推荐

{path:'/',component:login},

2.路由redirect重定向,设置默认组件

{path:'/',redirect:'login'},

路由传参

1.如果使用查询字符串 给路由传递参数则不需要修改路由规则的path属性

<router-link to="/login?id=10">登录</router-link>

2.使用query传递参数

var login={
      template:'<h2>登录----{{$route.query.id}}</h2>'
    }

详解vue路由

3.通过params方式传递路由参数,login后面会被解析为id的值

<router-link to="/login/12">登录</router-link>
var login={
      template:'<h2>登录----{{$route.params.id}}</h2>'
    }
{path:'/login/:id',component:login},

路由的嵌套

使用children属性实现路由嵌套,子路由path前不要加/,否则永远以根路径开始请求

<div id="div1"
      <router-link to="/account">account</router-link>
            <router-view></router-view>
    </div>
    <template id="tmp1">
      <div>
        <h2>account 组件</h2>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
      </div>
    </template>
var router=new VueRouter({
        routes:[
          {path:'/account',component:account,
          children:[
            {path:'login',component:login},
            {path:'register',component:register}
          ]}
        ]
      })

命名视图

命名视图在components(这时会多个s)后加属性再在使用<router-view></router-view>的时候用name引入,可以使一个页面中存在多个路由

<router-view></router-view>
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
var router=new VueRouter({
        routes:[
          {path:'/',components:{
            default:header,
            left:leftBox,
            main:mainBox
          }},
          
        ]
      })

以上就是详解vue路由的详细内容,更多关于vue路由的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
浅析node.js中close事件
Nov 26 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 #Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 #Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 #Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 #Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 #Javascript
vue 限制input只能输入正数的操作
Aug 05 #Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 #Javascript
You might like
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
设计师大码女装:11 Honoré
2020/05/03 全球购物
安全资金保障制度
2014/01/23 职场文书
捐赠仪式主持词
2014/03/19 职场文书
股东授权委托书范本
2014/09/13 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL
vue中 this.$set的使用详解
2021/11/17 Vue.js