您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章给大家分享的是有关一文带你读懂vue路由，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
前端路由和后端路由：
在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由
路由的使用
1.创建一个路由对象，当导入vue-router包之后，在window全局对象中就有一个路由的构造函数VueRouter
2.在new路由对象的时候可以传递一个配置对象，这个配置对象的route表示路由器的匹配规则
3.每个路由规则都是一个对象，这个规则对象身上必须有两个属性
var login={
template:'<h3>登录</h3>'
}
var register={
template:'<h3>注册</h3>'
}
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:'<h3>登录----{{$route.query.id}}</h3>'
}
3.通过params方式传递路由参数，login后面会被解析为id的值
<router-link to="/login/12">登录</router-link>
var login={
template:'<h3>登录----{{$route.params.id}}</h3>'
}{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>
<h3>account 组件</h3>
<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路由，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。