详解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 相关文章推荐
jquery放大镜效果超漂亮噢
Nov 15 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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写出自己的BLOG系统 2
2010/04/12 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python版学生管理系统
2018/01/10 Python
树莓派实现移动拍照
2019/06/22 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python帮你识破双11的套路
2019/11/11 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
个人原因辞职信模板
2015/05/13 职场文书
python requests模块的使用示例
2021/04/07 Python
简单谈谈Python面向对象的相关知识
2021/06/28 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
MySQL优化之慢日志查询
2022/06/10 MySQL