一、路由的作用是什么?
通过它可以进行视图的切换,比如tab切换
二、vue路由中涉及到的一些属性(部分)
active-class : 激活样式设置,可以自定义一个css样式,如 active-class=“test”
to: 指定路由的名称 如:to=’/position/index’
tag: 指定router-link最终解析的样式,默认解析成超链接(a标签)如:tag=‘li’
exact:精确匹配路径,如果遇到诸如下面这种情况就需要精确匹配。(它不会印影响具体的业务功能,但是会影响激活状态 active-class)
routes:[
{
path:"/",
redirect:"index"
},
{
path:'/pp/name/:name/age/:age',
component:pp
}
]
path:路径
redirect:重定向的地址
三、路由的几种形式
1 常规写法:(入门级)
//创建路由导航和路由显示区域
<div id="app">
<ul>
<!-- 使用router-link来导航 它默认会被渲染成一个a标签
<router-link to='/music' active-class='active'>音乐<
<router-link to='/sport' active-class='active'>体育
</ul>
<!-- 视图呈现区域 平级,谁离他近就呈现对应的内容 -->
<router-view></router-view>
</div>
// 创建VueRouter实例
var router = new VueRouter({
// 路由模式 模式hash
mode:"hash",
// 定义路由,可以多个,它是一个数组嘛
routes:[
{
// 路径,这里可以是相对的也可以是绝
path:'/music',
// 映射一个组件
component:{
// 模板 这里是路由对象的内容,
template:`
<div>this is music</div>
`
}
},
{
path:'/sport',
component:{
template:`
<div>this is sport</div>
`
}
}
]
})
//创建vue实例
var vm = new Vue({
//这里注意 一定要将router实例添加到vue实例中,也叫挂载根实例,从而让整个应用都有路由的功能(vue官方文档说法)
router,
el:"#app",
})
效果展示:
2 动态路由的形式:
简单来说就是在路径后面添加一些动态的内容,比如id
//在路径后面添加一些动态的内容
<router-link to='/home/88' active-class='active'>home</router-link>
// 定义一条动态路由
{
path:'/home/:id',
component:{
template:`
// 通过$route.params.id获取
<div>home--{{$route.params.id}}</div>
`
}
}
效果图:可以看到动态路由后面的动态内容已经取到了
3、嵌套路由
就是在已定义的一条路由的模板template中又嵌套了多个路由导航,实现多久导航的效果。个人觉得嵌套路由对于做多级导航效果很有帮助
//对sport路由进行重新定义,用到children关键字
{
path:'/sport',
component:sports,
// 下面可以定义多条嵌套的路由
children:[
{
path:'/sport/be',
component:{
template:`
<div>sport-be</div>
`
}
},
{
path:'/sport/fe',
component:{
template:`
<div>sport-fe</div>
`
}
}
]
},
// sports模板的定义
var sports ={
template:`
<div>
<router-link to='/sport/be'>sport-be</router-link>
<router-link to='/sport/fe'>sport-fe</router-link>
<router-view></router-view>
</div>
`
}
4 命名式路由
字面理解就是给路由设定一个名字呗,我们可以通过name来访问它,也可以根据它的name来设定路由导航。
1 根据已经设定的name来设定路由导航
// 首先给路由设置一个name
{
path:'/home/:id',
// 设置name为home
name:"home",
component:{
template:`
<div>home--{{$route.params.homeId}}</div>
`
}
}
//更加name来设定路哟导航,由于我这个是动态路哟,所以设置了params属性
<router-link :to="{name:'home',params:{homeId:888}}" active-class='active'>home</router-link>
测试结果:
可以发现跳转完成但是,地址栏的hash并没哟改变
2 我们做一个点击跳转效果
//在vue实例的methods中添加一个go方法:
go(){
//这种效果和第一个效果一样,同样可以把路由导航到/home/4444路径
router.push({
// 跳转到动态路由的话要加参数
name:"home",
params:{homeId:4444}
})
}
效果图:可以发现hash没哟改变
四、路由的一些用法
1 路由重定向
使用到的属性redirect,当我们导航到home这条路由时,会自动重定向到sport这条路由
routes: [
{ path: '/home', redirect: '/sport' }
]
2 路由组件传参
有三种形式,分别是:布尔模式,对象模式,函数模式。 都是基于props而言的
1 布尔模式,利用的是props,设为true
{
path:'/apple/:id',
// props设置为true,让其能够接收
props:true,
component:{
// 接收id
props:['id'],
template:`
// 我们直接通过{{id}}来获取
<div>{{id}}</div>
`
}
}
效果图:参数传递正常,接收正常
如果props设为false 我们会发现点击无效果:
2 对象模式 props是一个对象,props是静态的时候有用
{
path:'/banana',
props:{username:'wh',age:22},
component:{
props:['username','age'],
template:`
<div>{{username}}-----{{age}}</div>
`
}
}
效果图:
如果是一个动态路哟,你还想要获取动态参数,只能通过{{$route.params.id}}
template:`
<div>{{username}}-----{{age}}-----{{$route.params.id}}</div>
`
3 函数模式: props是一个对象
{
path:'/orange',
// props设置为函数,返回一个对象
props:(route)=>{
return {
username:'wh'
}
},
props:(route)=>({username:'wh'})
// 注意上面两个props函数的写法效果一样,任选一个即可//
component:{
// 同样,这个接收值
props:['username'],
template:`
// 调用
<div>{{username}}</div>
`
}
}
效果
3 命名视图
有时候我们想在同一级展示多个视图,但是又不想嵌套,这时可以使用它
注意: 如果视图没有命名,那么默认为default,这也是为啥下面我们直接default:ful
// 建立多个视图并且命名 name
<ul>
<router-link to='/index'>首页</router-link>
<router-link to='/search'>搜索</router-link>
</ul>
<router-view name='fe'>前端开发</router-view>
<router-view name='be'>后端开发</router-view>
<router-view >全栈</router-view>
//定义路由 用到了compontents 每个视图对应一个模板
{
path:'/index',
components:{
default:ful,
fe:fecon,
be:becon
}
}
// 三个模板
const ful = {
template:`
<div>这里是全栈</div>
`
}
const fecon = {
template:`
<div>这里是前端开发</div>
`
}
const becon = {
template:`
<div>这里是后端开发</div>
`
}
效果图:
以上就是vue路由的一些基础知识。