详解vue路由

 更新时间:2020年08月05日 11:42:01   作者:卐空羽流雲卍  
这篇文章主要介绍了vue路由的相关资料,文中讲解非常细致,帮助大家更好的理解和学习vue路由知识,感兴趣的朋友可以了解下

前端路由和后端路由:

  • 后端路由:对于普通的网站,所有的超链接都是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

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>'
    }

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路由的资料请关注脚本之家其它相关文章!

相关文章

  • vue多级多选菜单组件开发

    vue多级多选菜单组件开发

    这篇文章主要为大家分享了vue多级多选菜单组件开发案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 详解从vue-loader源码分析CSS Scoped的实现

    详解从vue-loader源码分析CSS Scoped的实现

    这篇文章主要介绍了详解从vue-loader源码分析CSS Scoped的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue 路由切换时页面内容没有重新加载的解决方法

    Vue 路由切换时页面内容没有重新加载的解决方法

    今天小编就为大家分享一篇Vue 路由切换时页面内容没有重新加载的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js评论发布信息可插入QQ表情功能

    vue.js评论发布信息可插入QQ表情功能

    这篇文章主要为大家详细介绍了vue.js评论发布信息可插入QQ表情功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue2.x 从vue.config.js配置到项目优化

    vue2.x 从vue.config.js配置到项目优化

    这篇文章主要介绍了vue2.x 从vue.config.js配置到项目优化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 浅谈Vue.js 中的 v-on 事件指令的使用

    浅谈Vue.js 中的 v-on 事件指令的使用

    这篇文章主要介绍了浅谈Vue.js 中的 v-on 事件指令的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vuex提升学习篇

    Vuex提升学习篇

    本篇文章主要介绍了Vuex提升学习篇,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    本篇文章主要介绍了详解使用Vue Router导航钩子与Vuex来实现后退状态保存,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • Vue异步组件使用详解

    Vue异步组件使用详解

    这篇文章主要为大家详细介绍了Vue异步组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue实现表格批量审核功能实例代码

    Vue实现表格批量审核功能实例代码

    这篇文章主要为大家详细介绍了Vue实现表格批量审核功能实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论