详解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路由的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue3+Antd实现弹框显示内容并加入复制按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要介绍了Vue动态加载异步组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Proxy代理对象详解,Proxy 是ES6中提供的一个非常强大的功能，可以用来代理另一个对象，从而拦截、监视并修改这个对象的各种操作,需要的朋友可以参考下2023-04-04
vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。这篇文章主要介绍了vue2.0 实现导航守卫（路由守卫）的相关知识,需要的朋友可以参考下2018-05-05
这篇文章主要给大家介绍了关于el-table虚拟滚动的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现ToDoList简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了Vue中滥用watch带来的问题以及如何解决,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
解决vue-cli webpack打包开启Gzip 报错问题
这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
Vue.sync修饰符与$emit(update:xxx)详解
这篇文章主要介绍了Vue.sync修饰符与$emit(update:xxx),实现思路非常简单，文章介绍了.sync修饰符的作用和使用.sync修饰符的写法，实现代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下2023-08-08
最新评论