详解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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
js 浏览器事件介绍
Mar 30 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
JS实现烟花爆炸效果
Mar 10 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
使用无限生命期Session的方法
2006/10/09 PHP
php缓冲输出实例分析
2015/01/05 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python numpy元素的区间查找方法
2018/11/14 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python numpy 反转 reverse示例
2019/12/04 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
教师个人自我评价范文
2014/04/13 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
python执行js代码的方法
2021/05/13 Python
用python批量解压带密码的压缩包
2021/05/31 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Python进程池与进程锁之语法学习
2022/04/11 Python
python中 .npy文件的读写操作实例
2022/04/14 Python