详解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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
Angular的$http与$location
Dec 26 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
python中@contextmanager实例用法
2021/02/07 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
高三高考决心书
2014/03/11 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
优秀学生评语大全
2014/04/25 职场文书
5s标语大全
2014/06/23 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
蜗居观后感
2015/06/11 职场文书
python 离散点图画法的实现
2022/04/01 Python