$route:路由信息对象,只读对象;
$router:路由操作对象 ,只写对象。
完整路径:window.location.href
路由路径:this.$route.path
默认路由方法1:
使用redirect 重定向默认路由。默认跳转到子路由 “/left/tab1”
export default new Router({
routes: [{
path: "/",
redirect: "/left"
},
{
path: "/left",
component: left,
//默认路由也可以用redirect 直接 重定向到子路由
redirect: "/left/tab1",
children: [
{
path: "tab1",
component: tab1
}, {
path: "tab2",
component: tab2
}]
},
{
path: '/right',
component: right
}
]
})
默认路由方法2:
//如果路径 设置是空,即path: “”.
等于是 默认路径
export default new Router({
routes: [{
path: "/",
redirect: "/left"
},
{
path: "/left",
component: left,
children: [{
//如果路径是空.等于是 默认路径
path: "",
component: tab1
},
{
path: "tab1",
component: tab1
}, {
path: "tab2",
component: tab2
}
]
},
{
path: '/right',
component: right
}
]
})
获取路由 URL里面的查询参数
方法1:使用$route.params.id
<router-link to="/left/tab1/1">tab1</router-link>
<router-link to="/left/tab2/2">tab2</router-link>
路由设置:
export default new Router({
routes: [{
path: "/",
redirect: "/left"
},
{
path: "/left",
component: left,
children: [{
//如果路径是空.等于是 默认路径
path: "",
component: tab1
},
{
path: "tab1/:id",
component: tab1
}, {
path: "tab2/:id",
component: tab2
}
]
},
{
path: '/right:id',
component: right
}
]
})
展示:
↓在html结构中,$route的前面不能带this
<p>{{$route.params.id}}</p>
方法2:使用props
设置路由:添加props:true
export default new Router({
routes: [{
path: "/",
redirect: "/left"
},
{
path: "/left",
component: left,
children: [{
//如果路径是空.等于是 默认路径
path: "",
component: tab1
},
{
path: "tab1/:id",
component: tab1,
props:true
}, {
path: "tab2/:id",
component: tab2
}
]
},
{
path: '/right:id',
component: right
}
]
})
页面接收id:
<template>
<div class="a">
<p>{{id}}</p>
</div>
</template>
<script>
export default {
props:["id"],
data() {
return {
}
</script>
URl多参数传递:
<router-link to="/left/tab1/1?name=zhangsan&age=10">tab1</router-link>
获取参数:
<p>{{$route.query.name}}</p>
<p>{{$route.query.age}}</p>
声明式的导航
声明式的导航和编程式的一样,这里就不在过多介绍,给几个例子大家对照编程式理解,例子如下:
字符串
<router-link to="news">click to news page</router-link>
命名路由:使用name、params
<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
效果:
查询参数:使用path、query
<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
注意:
1.命名路由搭配params,刷新页面参数会丢失
2.查询参数搭配query,刷新页面数据不会丢失
案例:
left.vue
<router-link :to="{path: '/left/tab1', query: { name: 'zhangsan'}}">tab1</router-link>
设置路由文件:
export default new Router({
routes: [{
path: "/",
redirect: "/left"
},
{
path: "/left",
component: left,
children: [{
//如果路径是空.等于是 默认路径
path: "",
component: tab1
},
{
path: "tab1",
component: tab1,
props:true
}, {
path: "tab2/:id",
component: tab2
}
]
},
{
path: '/right:id',
component: right
}
]
})
tab1.vue
<p>{{$route.query.name}}</p>
编程式导航
go方法是为了实现前进和后退的,n是一个数值,如果传1表示在历史记录中向前走一位,如果传-1,在历史记录中后退一位,
1、可以给push方法提供一个对象,对象中包含path属性,也指向一个hash地址,
2、可以给push方法提供一个对象,不用path属性,而是name属性,来实现命名路由的导航,同时还可以用params属性传参;
3、可以给push方法提供一个对象,path属性指向要跳转到的地址,通过query属性传递查询字符串,查询字符串会通过问号的形式拼接到url地址的后面去。
使用案例:
this.$router.push({
path: '/medContent1',
query: {
entityId: items.entityId,
materialsCode: items.materialsCode,
batch: items.batch,
type: items.type,
Openid: items.openId
}
})
其中路由规则如下:
{
path: '/medContent1',
component: () => import('@/views/medContent/index1')
},
获取参数:
this.$route.query.entityId