详解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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP 面向对象实现代码
2009/11/11 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
javascript 写类方式之七
2009/07/05 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
angular动态表单制作
2018/02/23 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python程序慢的重要原因
2020/09/04 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
商业计算机应用专业自荐书
2014/06/09 职场文书
业务员岗位职责范本
2015/04/03 职场文书
辅导员学期工作总结
2015/08/14 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python